• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 375
  • Last Modified:

JQUERY Toggle Div Issue

I am trying to toggle one div, but the collapse keeps coming up short due to a div to the right. How do I get the div to collapse all the way to the top. I am using the gumby framework as well. So what I'm looking for is for the "1. Shipping Information" div to collapse up and the "2. Billing Information" div below it to rise up to be just underneath the collapsed "Shipping Information" div, but the "Checkout Progress" div to the right gets in the way and the "2. Billing Information" stops right below that. Here is the general code:

   
<div class="row">
    	<div class="nine columns">
    		<div id="shipdiv">
    
    			Shipping Information Content
    
    		</div>
    	</div>
    
    	<div class="three columns">
    		<div>
    
    			Checkout Progress Content
    
    		</div>
    	</div>
    </div>
    
    
    
    <div class="row">
    	<div class="nine columns">
    		<div id="billdiv">
    
    			Billing Information Content
    
    		</div>
    	</div>
    
    	<div class="three columns">
    		<div>
    
    			Blank Content
    
    		</div>
    	</div>
    </div>

Open in new window



   
 <script>
    $( "#hide-ship" ).click(function() {
    $( "#shipdiv" ).toggle( "slow" );
    $( "#billdiv" ).toggle( "slow" );
    });
 

   </script>

Open in new window


Example Image
0
seeraig
Asked:
seeraig
1 Solution
 
GaryCommented:
Because you have the shipping and side bar in their own row and the billing in another row.
Just move the billing bits inside the same row under shipping.;
0
 
seeraigAuthor Commented:
thanks, that worked, simple, just missed it.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now