Search code examples
jquerycsstwitter-bootstrapslidetoggle

jQuery slideToggle with bootstrap

I am trying to use slideToggle to show sections of my site. Within each section, I want to use the bootstrap grid system to layout the contents within the section. The problem is that the slideToggle resets to have no height (which appears to be because of the presence of 

{ float: left; }

for bootstrap col-* elements).

Here is an example: http://jsfiddle.net/rcs2tej0/. I have pasted the bootstrap col-* css into the fiddle along with some of my own at the bottom. Section 1 is the default bootstrap css. Section 2 removes the float, but it will now not correctly follow the grid.

Solution

  • I guess this is what you want:

    Just adding overflow:auto; to .section-body in your CSS will solve your issue.

    Replaced Code:

    .section-body {
    display: none;
    border: 1px solid black;
    overflow:auto; /* ADDED */
}

    Working : Demo