getButterfly Logo getButterfly code wrangling since 2005

AccordionIf you want to turn a vertical ul/li menu with submenus into an accordion, just use this jQuery code and change the menu ID accordingly.

This is the simplest jQuery accordion for use with ul/li lists. Just bring your own CSS styling.

The code works with unstyled ul/li lists, just to make an idea of how it works. You can use it for vertical menus, tree view menus, even WordPress-like dashboard menus.

Don’t forget to replace $ with jQuery if using in WordPress.

$(document).ready(function() {
    $('#accordion li ul').hide();

    $('#accordion li a').click(function(){
        if($(this).next('ul:visible').length) {
        } else {
            $('#accordion li ul:visible').slideUp();
        return false;

Image source:

Subscribe to getButterfly Blog

Once a week or so we send an email with our best content. We never bug you, we just send you our latest piece of content.

If you found any value in this post, agree, disagree, or have anything to add - please do. I use comments as my #1 signal for what to write about. Read our comment policy before commenting! Comments such as "Thank you!", "Awesome!", "You're the man!" are either marked as spam or stripped from URL.

Leave a reply