简体   繁体   中英

Jquery UI accordion - Open two tabs in a controler

How to open two tabs in jQuery UI accordion controller at first load. There after normal behavior. Accordion default code.

<script>
  $(function() {
    $( "#accordion" ).accordion();
  });
</script>

You can use your own accordion without using JQuery UI. Function for open one tab in accordion:

        activeContent = $(".accordion > div:has(" + /*item's text*/ + ")"); //your submenu item

        activeContent.show();
        activeContent.siblings("div:visible").hide();
        activeContent.prev("h3").addClass("active");
        activeContent.prev("h3").siblings("h3").removeClass('active');
        $(".accordion > div p").removeClass('selected');
        $(".accordion > div " + /*item's text*/).addClass('selected');

And structure html should be:

    <div class="accordion">
        <h3 class="subMenuItemHeader">Header1</h3>
        <div>
            <p class="submenuItem">Submenu item 1</p>
            <p class="submenuItem">Submenu item 2</p>
            <p class="submenuItem">Submenu item 3</p>
        </div>

        <h3 class="subMenuItemHeader">Header2</h3>
        <div>
            <p class="submenuItem">Submenu item 1</p>
            <p class="submenuItem">Submenu item 2</p>
            <p class="submenuItem">Submenu item 3</p>
        </div>
    </div>

So you'll be able to open two tabs in accordion.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM