Accordion slider not close previous tab on click other tab

Question

I am using the jquery accordion for display information for a website. i make the slider opens when the user clicks the specific link in the sub-menu like.

Facilities--> 1. Rooms 2. Hospitality 3. Green Walk 4. Book Options

If user click the any of the sub-menu the respected accordion tab will be open. with the below code i make it.

      <script type="text/javascript">
        jQuery(function () {
            jQuery("#accordion").accordion();
        });

        jQuery(document).ready(function () {
            $(<%=m_id %>).next().toggle('slow'); //<%=m_id%> the id of every tabs of accordion i pass form the code behind in asp.net

              });
        </script>

HTML:

                       <div id="accordion"> 

                        <h3 id="rooms">
                            a href="#">Rooms</a></h3>
                        <div id="rooms">
                            <p>
                                Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus

                            </p>
                        </div>
                        <h3 id="Hosp">
                            a href="#">Hospitality</a></h3>
                        <div id="Hosp">
                            <p>
                                High Performance team Building, Leadership
                                Development Program, Train the Trainers, Introduction to NLP and Advanced NLP, Fire-Walk
                                etc.
                            </p>

                        </div>
                        <h3 id="green">
                    Green Walk                            
                <div id="green">
                            <p>
                                et malesuada fames ac turpis egestas. Vestibulum
                                ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean
                                lacinia mauris vel est.
                            </p>

                        </div>
                        <h3 id="book">
                            <a href="#">Book Options</a></h3>
                        <div id="book">

                            <p>
                                Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class
                                aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

                            </p>
                        </div>
                    </div>

so, here the issue is when the user click the next sub-menu or click the next tab in the accordion the previous one is remains open.

How to close the opened tab when the next tab is open.

@krish Hiya, Is this what you are looking for bit simpler - jsfiddle.net/jbsjw/1 or do you have any jsfiddle we can play around with? please let me know if this helps (will update it as answer), cheers — Tats_innit

Krish Krish · Accepted Answer · 2012-03-20T05:10:23

i got that accordion to work fine with this javascript

 <script type="text/javascript>
    var i=0;
        $(document).ready(function () {          
         jQuery('#accordion').accordion();
         autoHeight: true;
         $('#<%=m_id %>').next().slideDown('slow');
         $(document).click(function(){
         if(i==0){$('#<%=m_id %>').next().slideUp('slow');i++}else{$('#<%=m_id %>').val('');}

         });
        });
    </script>

Accordion slider not close previous tab on click other tab

1 Answers