CODEWITHSUNDEEP
javascriptjqueryjquery-uiaccordion
user1610904
user1610904

Reputation: 397

jQuery UI Accordion - "If Statement" for Open/Closed Panels

I have the below code that moves any clicked accordion panel to the top of the page. However, I have some accordion panels open by default, and I don't want the opened ones animating when someone closes them. Therefore, I want the "scroll to top" code to only apply to closed panels. So I guess I need it within some kind of "if statement" detecting the open/closed state. Any idea how to accomplish this?

<div id="accordion">

<!--Open panel by default-->
<h3 class="accordion">Question</h3>
<div class="content">
<p>text</p>
</div>

<!--Closed panel-->
<h3 class="accordion">Question</h3>
<div class="content">
<p>text</p>
</div>

</div>

<script>
jQuery(function() {
    var defaultPanel = parseInt(getParamFirst('section'));
    jQuery( "#accordion" ).accordion(
        {active: defaultPanel,
        autoHeight: false,
            collapsible: true,
            heightStyle: "content",
            animate: 200}
    ).show(); 
});

//////////////////////////////////////////////////
//Fire the below code only on closed panels
//////////////////////////////////////////////////

jQuery('.accordion').bind('click',function(){
            var self = this;
            setTimeout(function() {
                theOffset = jQuery(self).offset();
                jQuery('body,html').animate({ scrollTop: theOffset.top - 110 });
            }, 200);
});
</script>

Upvotes: 0

Views: 856

Answers (1)

Artem
Artem

Reputation: 833

Add .not('.ui-state-active'):

jQuery('.accordion').not('.ui-state-active').bind('click',function(){
...

Upvotes: 1

Related Questions