A Simple Accordion Menu using JQuery and CSS

October 11th, 2013
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

You don’t have to be specialists 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 website. With a little help from CSS, you can design a nice and simple vertical accordion menu, which can also save lot space on your website.

Let’s Style it

We have tried to keep the styling as simple as possible so not to make it look complicated. But yes, there is one little thing we would like you to know is that we are only using JQuery to make the menus expand or collapse.

We will do a little styling on our own to give it a smooth feel 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 like “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 for make the menus work the way we want it. We will add a little animation and color using JQuery “.css()” function.

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

<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>
Finishing it

Check the demo and see how it works and we are sure that this is a simple accordion menu which does not need too much time and effort, but looks fabulous once completed. You can make it look better using your CSS and designing skills, of course.

Demo

comments powered by Disqus

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