Create custom accordion vertical menu with jquery in easy way

Here i am going to provide you very common script that you have used so much time.Here i have provided very easy way to create this script or you may apply this script in your project directly.
I this script, i haven't used any bootstrap or other framework, i just used simple html, css and jquery.

I have assumed that you have basic knowledge of  html, css and jquery. If you don't know about jquery then go to link and read jquery.ohhh...one thing more..i have used font awesome for this script.

Learn Jquery

1.  Create html part for this accordion script.

   


Heading 1 

List 1
List 2
List 3
List 4
List 5
List 6




   


   


Heading 2 

List 1
List 2
List 3
List 4
List 5
List 6

2. Now create css for this script.

@font-face{
 src:url(fonts/open-sans/OpenSans-Regular_0.ttf);
 font-family: openR;
}

body{
 font-family: openR;
}

.mainContainer{
 width: 1000px;
 margin: 0 auto;
}

.mainMenu{
 margin-bottom: 10px;
}

.mainMenu h3{
 margin: 0px;
 padding: 0px;
}

.mainMenu{
 background: #eee;
 border:1px solid #ccc;
 border-radius:3px;
 padding: 3px 5px 5px 3px;
}

.mainMenu i{
 font-size: 20px;
 cursor: pointer;
 display: block;
}

.mainMenu ul{
 margin: 0px;
 padding: 0px;
 margin-top: 20px;
 border-radius:4px;
 list-style: none;
}

.mainMenu ul li{
 padding: 5px 8px;
 display: block;
 background: #fff;
 border-top:1px solid #ccc;
 border-left:1px solid #ccc;
 border-right:1px solid #ccc;
}

.mainMenu ul li:last-child{
 border-bottom:1px solid #ccc;
}

3. Now create main important file for js and paste the code below.

// When window load
$(window).load(function(){
 $(".mainMenu ul").hide();
 $(".mainMenu i").addClass("fa-plus");
});

// When Page loaded
$(document).ready(function(){
 $(".mainMenu").on("click","i",function(){
  $targetDiv=$(this).attr("data-target");
  $(this).toggleClass("fa-minus");
  // console.log($targetDiv);
  $("ul."+$targetDiv).slideToggle("slow");
 });
}); 

Categories: css, html, jquery