CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
Logan H
Logan H

Reputation: 3423

Handling toggle of divs upon a click event using Bootstrap and jQuery

I have two divs in my html page, side by side.

I want to click a button and have the div on the right toggle (show/hide) . So I use jquery and jquery's .toggle() method.

The problem is that when I toggle the right div the div on the left seems to move left and go half way off the screen. I went through the dev tools in Chrome and I think that it is bootstrap that is messing with my divs

So I think that I will have to write my own css to override the bootstrap css but I'm not sure

Link to the FIDDLE that shows my problem.

Once the right div is hidden I would like the left div to then fill the screen. (Width wise)

FIX

Updated FIDDLE

Upvotes: 0

Views: 124

Answers (1)

Jay
Jay

Reputation: 2686

Instead of using push-md-10 try instead using the regular col-md-12 as your restructuring

so if you want the divs to stay in place on the page you can have

 <div class="col-md-10">
    //Content to hide
 </div>
 <div class="col-md-2">
   //content to hide
 </div>

Now you can just hide the stuff in that column

Another example:

<div class="col-md-3"></div>
<div class="col-md-5"> something worth 5 pushed 3 over </div>
<div class="col-md-4"></div>

NOTE: you always want a factor of 12 because that constitutes a bootstrap row size

Upvotes: 1

Related Questions