CODEWITHSUNDEEP
javascriptjqueryhtmlcssaccordion
UID
UID

Reputation: 4514

Keep all the Accordion options visible but open/close or collapse one at a time

I have a custom Accordion, which has by default all the options in "Visible/Open" state.

When I click first time, it close the particular element. But when I click it again, it open that particular element but close rest all.

It should collapse and open One element ata time.

Here is my Accordion code:

HTML:

<div id='accordionmenu' class="clear">
<ul class="grid-18">
    <li class="inputRow active"> <a href='javascript:;'><h2 class="first">Heading #1</h2></a>
        <ul>
            <li>
                <div class="grid-8">Content for heading 1</div>
            </li>
        </ul>
    </li>
    <li class="inputRow active"> <a href='javascript:;'><h2 class="first">Heading #2</h2></a>
        <ul>
            <li>
                <div class="grid-8">Content for heading 2</div>
            </li>
        </ul>
    </li>
    <li class="inputRow active"> <a href='javascript:;'><h2 class="first">Heading #3</h2></a>
        <ul>
            <li>
                <div class="grid-8">Content for heading 3</div>
            </li>
        </ul>
    </li>

JS

 $('#accordionmenu > ul > li:has(ul)').addClass("has-sub");
 $('#accordionmenu > ul > li > a').click(function () {
     var checkElement = $(this).next();
     $(this).removeClass('active');
     $(this).closest('li').addClass('active');

     if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
         $(this).closest('li').removeClass('active');
         checkElement.slideUp('normal');
     }

     if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
         $('#accordionmenu ul ul:visible').slideUp('normal');
         checkElement.slideDown('normal');
     }

     if (checkElement.is('ul')) {
         return false;
     } else {
         return true;
     }
 });

Here is the Fiddle for the same: http://jsfiddle.net/XLw2Z/

Let me know if you need any other information.

Please suggest.

Upvotes: 2

Views: 1282

Answers (2)

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33870

This is responsible for the other accordion to toggle :

 if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
     $('#accordionmenu ul ul:visible').slideUp('normal');
     checkElement.slideDown('normal');
 }

By commenting the line $('#accordionmenu ul ul:visible').slideUp('normal');. Everything work like you want.

Upvotes: 2

Marcel
Marcel

Reputation: 375

Try this http://jsfiddle.net/5vG9Z/

 $('#accordionmenu > ul > li:has(ul)').addClass("has-sub");
 $('#accordionmenu > ul > li > a').click(function () {

     $(this).next().toggle('slow')

     return false;
 });

Upvotes: 1

Related Questions