Click link to collapse already expanded accordion
<p>I have an accordion that when the page loads all the accordions are collapsed, when you click on one of them it expands. It currently only collapses when you click on a link that is already collapsed.</p>

<p>How can I change the jQuery below so that when you click on an already expanded accordion it collapses?</p>

<p>I know there's already a few variations of this question out there but I can't quite get to an answer with the little Jquery I know!</p>

<pre><code>&lt;script type="text/javascript"&gt;
jQuery(function($) {
$(document).ready(function(){   
    //Set default open/close settings
    $('.acc_container_products').hide(); //Hide/close all containers
    // $('.acc_trigger_products:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container

    //On Click
    $('.acc_trigger_products').click(function(){
    if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
        $('.acc_trigger_products').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
        $(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
    }
    return false; //Prevent the browser jump to the link anchor
    });
});
});
&lt;/script&gt;
</code></pre>

<p>HTML:</p>

<pre><code>                        &lt;h2 class="acc_trigger_products"&gt;&lt;a href="#"&gt;Technical specification&lt;/a&gt;&lt;/h2&gt;
                    &lt;div class="acc_container_products"&gt;
                        &lt;div class="block_products"&gt;    
                            &lt;div class="included-content"&gt;
                                &lt;ul style="margin-top:0px!IMPORTANT;margin-bottom:0px!IMPORTANT;"&gt;
                                &lt;?php while(the_repeater_field('technical_specification')): ?&gt;
                                    &lt;li&gt;
                                        &lt;?php echo the_sub_field('technical_specification'); ?&gt;
                                        &lt;?php if(get_sub_field('extra_information') != "") { ?&gt;
                                            &lt;img title="&lt;?php echo the_sub_field('extra_information'); ?&gt;" class="helpButton" src="&lt;?php bloginfo('stylesheet_directory'); ?&gt;/images/rogue-resolutions-help-button.png" height="20" width="20" /&gt;
                                        &lt;?php } ?&gt;
                                    &lt;/li&gt;
                                &lt;?php endwhile; ?&gt;
                                &lt;/ul&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;      
                    &lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>    h2.acc_trigger_products {
    color:black;
    font-family:Helvetica, Arial;
    font-size:14px;
    padding: 0;
    margin: 2px 0 0 0;
    background-image: url('images/rogue-resolutions-products-acc.png');
    background-repeat:no-repeat;
    height: 32px;
    line-height: 32px;
    width: 298px;
    font-weight: normal;
    float: left;
}
h2.acc_trigger_products a {
    color:black!IMPORTANT;
    font-family:Helvetica, Arial;
    font-size:14px;
    text-decoration: none;
    display: block;
    padding: 0 0 0 15px;
    font-weight:bolder; 
}
h2.acc_trigger_products a:hover {
    color:black!IMPORTANT;
    font-family:Helvetica, Arial;
    font-size:14px;
    font-weight:bolder;
}
h2.active {background-position: left bottom;}
.acc_container_products {
    margin: 0px; 
    padding: 0;
    overflow: hidden;
    font-size: 1.2em;
    width: 296px;
    clear: both;
    background-color: #ccc;
}
.block_products {
    padding:10px;
    width:276px;
    }

.acc_container_products p.title {
    margin:0px!IMPORTANT;
    }

.acc_container_products p {
    margin-top:0px!IMPORTANT;
    }
</code></pre>
