A Simple Accordion Menu using JQuery and CSS

Traditionally menus, used for navigating a website are designed using CSS to make them look good and also it helps laying out the elements properly on a website. Accordion menus in particular can also be designed using a JQuery.

JQuery Accordion Menu with CSS

Demo

You don’t have to be expert to work with JQuery, since most of its functions come in package which is usually simple and all you have to do is lay them accordingly on your web page. With a little help using CSS, you can design a nice and simple vertical accordion menu, which can also save little space on your web page.

Let’s Style it

We have tried to keep the styling as simple as possible, since we will focus more on our JQuery scripts, to make the menus expand (or collapse). The style will give it a smooth flow and also highlight (or color) the active Block’s header

<head>
    <style>
        :focus, :active { outline:0; }

        #accordion { 
            width:500px; 
            margin:0 auto; 
            font:normal normal 13px sans-serif; 
            color:#555; 
        }
        
        #accordion h3 {
            padding:5px; 
            -webkit-border-radius:3px; 
            border-radius:3px;
            -moz-box-shadow:0 1px 4px #CCC; 
            -webkit-box-shadow:0 1px 4px #CCC; 
            box-shadow:0 1px 4px #CCC; 
            margin:3px 0; 
            cursor:pointer;
        }

        #accordion div {
            margin:0 0 0 10px; 
            padding:10px; 
            border:solid 1px #F6F6F6; 
            height:auto;
        }
    </style>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
</head>
The Markup

To keep it simple, we will design the accordion menu using very commonly used elements. Elements such as DIV and h3 will be enough for our menu to function accordingly. The DIV will work as containers and the HTML headers h3 will serve as our menu heads.

<body>
    <div id="accordion">
    
        <h3>Asp.Net</h3>
            <div>Hello World (C#)
            <pre>
            using System;
            protected void Page_Load(object sender, EventArgs e)
            {
              Response.Write("Hello, world");
            }</pre></div>
            
        <h3>JQuery</h3>
            <div>JQuery is a JavaScript library to write cross browser client side script.
            <pre>
            $(document).ready(function() {
                $('#accordion').accordion();
                
                $('#Close').click(function() {
                    $('#div').hide();
                });    
            });</pre></div>
            
        <h3>CSS</h3>
            <div>Cascading Style Sheets (CSS) is used for styling and laying HTML elements on a web page.
            <pre>
            .classname div { 
                padding:3px 5px; border:solid 1px #CCC 
            }
            </pre></div>
            
        <h3>Cloud Computing</h3>
            <div>An expression used to  describe a variety of different types of computing concepts 
                that involve a large number of computers connected through a real-time communication 
                network such as the Internet.
            </div>
            
        <h3>SQL Server</h3>
            <div>Microsoft's SQL Server is a Relational Database Managment System (RDBMS), 
                whose primary function is to store and retrieve various types of data.
            <pre>
            SELECT EmpID, EmpName, Designation
                FROM Employee
                    WHERE EmpID = 3</pre></div>
                </div>
</body>

JQuery .accordion() function

Finally, we write the script, which is responsible to make the menus work the way we want it. We will add a little animation and color using JQuery .css() method.

The click event of each menu header will result in expanding of collapsing of the menus. In addition, we will make sure that the selected or expanded blocks header is highlighted to avoid any confusion about the active block.

<script>
    $(document).ready(function() {
        // JQUERY FUNCTION.
        $("#accordion").accordion({
            heightStyle: "content"
        });
    });
    // EXPAND AND COLLAPSE MENUS ON “HEADER CLICK”
    $("#accordion h3").click(function() {
        $("#accordion h3").animate({ 'background-color': '#FFF' }, 300);
        $("#accordion h3").css({ 'color': '#000' });

        $(this).animate({ 'background-color': '#FA6305' }, 300); // HIGHLIGHT THE SELECTED HEADER (BLOCK)
        $(this).css({ 'color': '#FFF' });
    });
</script>
Conclusion

Check the demo and see how it works. We are sure that this simple accordion menu that need very less time and effort to design, looks fabulous once completed. Not to mention, you can make it look even better using your CSS and designing skills. Let us know if this article has helped in anyway. Leave a message and do not forget to share it with your friends.

Demo

comments powered by Disqus

Join our Google Plus Community and be a part of a discussion!