Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript / Jquery / Slidetoggle

Get Display Status Element Effected By .slidetoggle()?

Post a Comment
I've tried is(':visible'), is(':hidden') and css('display') but I can not get the display status of an element after it has been through .slideToggle() What am I missing? Here is t

Solution 1:

wait for slideToggle to finish before checking status.

    $(this.parentNode).nextAll('ul').eq(0).slideToggle(
        (function () {

            $('#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 />'
                        );

        }).bind(this)
    );

Solution 2:

Once gp. mentioned the concept of the "event finishing" I was able to find this thread.

jQuery wait for event to complete

I didn't know that I didn't know about this concept and how it related to the issue I was having. Thank you for the incite.

Here is the updated jsFiddle: http://jsfiddle.net/djlerman/jbNg3/3/

and the updated code.

<!DOCTYPE html><htmllang="en"><head><title>Test Slide Toggle</title><linkhref="http://code.jquery.com/ui/1.10.3/themes/ui-lightness/jquery-ui.css"type="text/css"media="all" /><styletype="text/css">.ui-icon {
    float:left;
}
</style><scriptsrc="http://code.jquery.com/jquery-1.10.2.min.js"type="text/javascript"></script><scriptsrc="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"type="text/javascript"></script><scriptlanguage="javascript"type="text/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( function () {

            $('#debug').html($(this).attr('id') +  ' is(:visible): ' +  $(this).is(':visible') + '<br />' +
                             $(this).attr('id') + ' is(:hidden): ' + $(this).is(':hidden') + '<br />' +
                             $(this).attr('id') + ' .css(display): ' + $(this).css('display') + '<br />'
                            );
        }).bind(this);

    })

});
</script></head><body ><divid="debug"><br /><br /><br /></div><hr /><h3><spanid="expandList"class="ui-icon ui-icon-triangle-1-s" ></span>
  Heading 1
</h3><ulid="heading1"><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul><h3><spanid="expandList"class="ui-icon ui-icon-triangle-1-s"></span>Heading 2
</h3><ulid="heading2"><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul><h3><spanid="expandList"class="ui-icon ui-icon-triangle-1-s"></span>Heading 3
</h3><ulid="heading3"><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul></body></html>

Post a Comment for "Get Display Status Element Effected By .slidetoggle()?"