How Do I Keep the Accordion Submenu Open?

This is a feature requested by many of our users and we're happy to announce we've just implemented it! Now our accordion menus can have submenus opened by default.

Usage

I'm going to use our Slabbed accordion menu as an example. The menu looks like this with our default structure:

How Do I Keep the Accordion Submenu Open?

And this is the code:

<div id='cssmenu'>  
  <ul>
    <li><a href='index.html'><span>Home</span></a></li>
    <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
        <li class='has-sub'><a href='#'><span>Product 1</span></a>
          <ul>
            <li><a href='#'><span>Sub Item</span></a></li>
            <li class='last'><a href='#'><span>Sub Item</span></a></li>
          </ul>
        </li>
        <li class='has-sub'><a href='#'><span>Product 2</span></a>
          <ul>
            <li><a href='#'><span>Sub Item</span></a></li>
            <li class='last'><a href='#'><span>Sub Item</span></a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href='#'><span>About</span></a></li>
    <li class='last'><a href='#'><span>Contact</span></a></li>
  </ul>
</div>  

As you can see, the Products item has a submenu. To make it open by default, you just have to give the list element which contains the submenu the class active.

<div id='cssmenu'>  
  <ul>
    <li><a href='index.html'><span>Home</span></a></li>
    <li class='active has-sub'><a href='#'><span>Products</span></a>
      <ul>
        <li class='has-sub'><a href='#'><span>Product 1</span></a>
          <ul>
            <li><a href='#'><span>Sub Item</span></a></li>
            <li class='last'><a href='#'><span>Sub Item</span></a></li>
          </ul>
        </li>
        <li class='has-sub'><a href='#'><span>Product 2</span></a>
          <ul>
            <li><a href='#'><span>Sub Item</span></a></li>
            <li class='last'><a href='#'><span>Sub Item</span></a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href='#'><span>About</span></a></li>
    <li class='last'><a href='#'><span>Contact</span></a></li>
  </ul>
</div>  

Result:

How Do I Keep the Accordion Submenu Open?

This can be done even easier with our menu builder. Just select the item with the submenu and check the Active box.

How Do I Keep the Accordion Submenu Open?