jQuery collapsing list?

Question

Check out http://jqueryui.com/demos/draggable/

At the bottom there's a tabbed section... the seconds tabs "Details" gives the example of exactly what I want to accomplish. You can show/hide each row, and you can show/hide the details within that list row.

Is this part of the jQuery UI? If so, does anyone happen to know what it's called?

Answer 1

It is part of jQuery. It is just a simple hide and show on another div.

<div class="Control">Toggle</div>
<div class="Content" style="display: none;">Some content you want to toggle.</div>

<script>
    $(".Control").click(function(){
        $(this).next(".Content").toggle();
    });
<script>

Your elements can change to anything you want, LI, IMG, DIV.

Answer 2

here is a simple accordion if you don't want them all to hide. remove this line $('.contentblock').not(c).hide();

<ul id="accord">
  <li>
    <a href="#">title</a>
    <div class="contentblock">Content</div>
  </li>
  <li>
    <a href="#">title2</a>
    <div class="contentblock">Content2</div>
  </li>
 </ul>

then ...

$(function () {
  $('.contentblock').hide();
  $('#accord').delegate('li > a','click',function () {

    var c = $(this).parent().find('.contentblock').toggle();
    $('.contentblock').not(c).hide();
  })
});