[jQuery] Collapse div content in jQuery UI tabs

I have a page that I wanted to collapse the tab content, but keep the tab header there so that it could be expanded on later.

If you are using jQuery Tabs, you will notice that calling $('#tabs').slideToggle(); hides the entire tabs display. To hide only the content and keep the tabs, try this:


Full Source:

<div id="tabs">
 <ul>
  <li><a href="#tab1">Tab A</a></li>
  <li><a href="#tab2">Tab B</a></li>
  <li><a onclick="$('#tabs div').slideToggle()">Collapse Content</a></li>
 </ul>

<div id="tab1">Stuff A</div>
<div id="tab2"> stuff B</div>


</div>

Note: You will need the following jQuery pieces to get Tabs working:

• UI Core
• UI Widget
• jQuery 1.7.2

Posted in: HTML, JQuery