Create Simple Accordion Menu using jQuery

Create Simple Accordion Menu using jQuery

In this Post We Will Explain About is Create Simple Accordion Menu using jQuery With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to accordion jquery examples with source code Example

In this post we will show you Best way to implement Creating an Accordion with HTML, CSS & jQuery, hear for How to create Accordion Menu using jQuery with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Also Read :   Regular Expressions - string Array json RegExp Object




Getting Started for Create Simple Accordion Menu using jQuery

We have used CDN(libes) for jquery so you must need Your internet Data connection for them to work on Create Simple Accordion Menu using jQuery.

//latest version
jquery/jquery.min.js

index.html

This is the main HTML view of our Simple Web Application. In here, we have init Base declared all our simple my this Example(Create Simple Accordion Menu using jQuery) dependencies and the HTML Elements that we have created.

<ul id="light-menu-tabs">

    <li><a href="#">live24u</a>
        <ul class="sub">
            <li><a>Example</a></li>
            <li><a>Demo</a></li>
            <li><a>Download</a></li>
            <li><a>Tutorials</a></li>
            <li><a>SourceCode</a></li>
        </ul>
    </li>

    <li><a href="#">PHP</a>
        <ul class="sub">
            <li><a>Laravel</a></li>
            <li><a>Magento</a></li>
            <li><a>Oracle</a></li>
        </ul>
    </li>

    <li><a href="#">JavaScript</a>
        <ul class="sub">
            <li><a>Angularjs</a></li>
            <li><a>Vuejs</a></li>
            <li><a>Meanjs</a></li>
            <li><a>Reactjs</a></li>
        </ul>
    </li>

</ul> 

jQuery

Second Step custom jQuery accordion menu is ready, learn jquery source code to activate its more lightwaight functionality by jquery onclick event.

Also Read :   Create Simple Accordion Menu using Angularjs

$(document).ready(function () {

    $("#light-menu-tabs > li > a").click(function () {

        $("#light-menu-tabs > li > ul").slideUp();         

        $(this).parent().find(".sub").slideToggle(); 

    });

}); 

CSS

It data containts our some CSS source to style custom pure css accordion menu as well as give some jquery effect.

#light-menu-tabs {
    text-align: center;
    margin: 0 auto;
    width: 450px;

}
#light-menu-tabs li  {
    display: block;
    padding: 8px 12px;
    background: #2df1f1;
    text-decoration: none;
    color: #c60000;
}

#light-menu-tabs li ul li {
    display: block;
    padding: 8px 12px;
    background: #3d3d3d;
    border-top: 1px solid #ccc;
    text-decoration: none;
    color: #c60000;
}
.sub {
    display: none; 
}

#light-menu-tabs li ul li a {
    color: #fff;
} 

jQuery Accordion Menu

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Also Read :   Vue js Drag and Drop Customizable list - step by step





Example

I hope you have Got What is Creating an Accordion with HTML, CSS & jQuery And how it works.I would Like to have FeedBack From My Blog(live24u.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.