Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    25
    Thanks
    7
    Thanked 0 Times in 0 Posts

    jQuery onClick div split

    Hi!
    Upon pressing the button i want it to split into two parts, one upper and one lower (vertically). Inbetween these parts i want another div to appear, which will be 100% wide.
    Right now i have so that when the button is pressed, the div changes from a height of 0 to a full height and toggeling a border.
    However, the script I have now doesn¨t work if two different parts of the div is pressed. Right now the script looks like this:

    Code:
    var divh = document.getElementById('people').offsetHeight;
      document.getElementById("people").style.height = "0px";
      jQuery("body.main #people").css('border', '0');
    	jQuery("div.showmore").toggle(function(){
      		jQuery("div#people").animate({
        		height: divh
      		},500).css('border-bottom', '1px solid #111');
      	},function(){
        	jQuery('div#people').animate({
        		height: ['0px', 'swing']
        	},400).css('border', '0');
      		});
    This code is both slow and it doesnt work
    The html code looks like this:

    Code:
    <div class="showmore"></div>
    <div id="people"></div>
    <div class="showmore"></div>
    How would I get this to work?
    I'm thinking of something with variables or alike, but I might be doing this over complicated.
    If the div wasn't wider than the button it would've been easier. This might be solved by some CSS hack.

    Thank you in advance.
    //Will

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,692
    Thanks
    25
    Thanked 657 Times in 656 Posts
    You want to split a div into a top part and a bottom part..... Where do you want that break to occur, in the center, 25% top - 75% bottom? And most importantly, what do you want done with the contents of the div? How is that distributed?

  • #3
    New Coder
    Join Date
    Dec 2011
    Posts
    25
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    You want to split a div into a top part and a bottom part..... Where do you want that break to occur, in the center, 25% top - 75% bottom? And most importantly, what do you want done with the contents of the div? How is that distributed?
    Either I split a div in the middle (50%) or I make two seperate divs that looks like they are the same, which shouldn't be any problem. The problem is to make it work with javascript, so that when one part of the button is pressed (one div), the other button's toggle function i triggred.
    Look here, and you'll see what I mean.
    http://codepen.io/anon/pen/Jcmkx


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •