CODEWITHSUNDEEP
javascriptjquery-ui
dcolumbus
dcolumbus

Reputation: 9722

jQuery collapsing list?

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?

Upvotes: 0

Views: 805

Answers (2)

Dustin Laine
Dustin Laine

Reputation: 38503

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.

Upvotes: 1

Bruce Aldridge
Bruce Aldridge

Reputation: 2937

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();
  })
});

Upvotes: 0

Related Questions