Toggle <UL> based on span click

Toggle <UL> based on span click

by Donavon Lerman

HTML

<h3>
  <span id="expandList" class="ui-icon ui-icon-triangle-1-s" ></span>
  Heading 1
</h3>
<ul id="heading1">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>


<h3>
  <span id="expandList" class="ui-icon ui-icon-triangle-1-s"></span>Heading 2
</h3>
<ul id="heading2">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>


<h3>
  <span id="expandList" class="ui-icon ui-icon-triangle-1-s"></span>Heading 3
</h3>
<ul id="heading3">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<div id="debug"></div>

CSS

.ui-icon {
    float:left;
}

JavaScript

$(document).ready(function () {
    $('span#expandList').click(function () {
        if ($(this).attr('class') == "ui-icon ui-icon-triangle-1-s") {
            $(this).attr('class', "ui-icon ui-icon-triangle-1-e");
        } else {
            $(this).attr('class', "ui-icon ui-icon-triangle-1-s");
        }

        $(this.parentNode).nextAll('ul').eq(0).slideToggle();
        
        $('#debug').html($(this.parentNode).nextAll('ul').eq(0).attr('id') +  ' is(:visible): ' +  $(this.parentNode).nextAll('ul').eq(0).is(':visible') + '<br />' +
                        $(this.parentNode).nextAll('ul').eq(0).attr('id') + ' is(:hidden): ' + $(this.parentNode).nextAll('ul').eq(0).is(':hidden') + '<br />' +
                        $(this.parentNode).nextAll('ul').eq(0).attr('id') + ' .css(display): ' + $(this.parentNode).nextAll('ul').eq(0).css('display') + '<br />'
                        );
        
        


        
    })

});