Simple jQuery Accordion Script Ready to use Code

accordion

Wondering how to do an Accordion using jQuery Library?.

Just download this script and start using it on your site right now!. (Download and Demo link at the bottom of the post)

This below simple jQuery Accordion Slider script will do the magic!.

$(document).ready(function(){
$(".menu_body").hide();
//toggle the componenet with class menu_body
$(".menu_head").click(function(){
$(this).next(".menu_body").slideToggle(600);
var plusmin;
plusmin = $(this).children(".plusminus").text();

if( plusmin == '+')
$(this).children(".plusminus").text('-');
else
$(this).children(".plusminus").text('+');
});
});

One Paragraph tag and a div tag is used in the whole script to make the accordion slider.

‘p’ tag as ‘menu_head’ and the ‘div’ tag as the ‘menu_body’

When the HTML page loads, the whole menu_body will be hidden and only the menu_head will be shown.

Onclick of the menu_head will show the menu_body contents.

See the below HTML code:

<p class="menu_head">Text Menu 1<span>+</span></p>
<div class="menu_body"style="display: none;">
Some text description will go here
</div>

For your convenience, I wrote the entire code in one short:

<html>
<head>
<style>
.menu_container {
 	width: 500px;
}
.menu_head {
    background: url(images/red.png) brown;
    color: white;
    cursor: pointer;
    font-family: arial;
    font-size: 14px;
    margin: 0 0 1px 0;
    padding: 7px 11px;
    font-weight: bold;
}
.menu_body {
    background: lightgray;
}
.menu_body p{
    padding: 5px;
    margin: 0px;
}
.plusminus{
    float:right;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".menu_body").hide();
    $(".menu_head:first-child").next(".menu_body").slideToggle(600); 
    //toggle the componenet with class menu_body
    $(".menu_head").click(function(){
        $(this).next(".menu_body").slideToggle(600); 
        var plusmin;
        plusmin = $(this).children(".plusminus").text();

        if( plusmin == '+')
        $(this).children(".plusminus").text('-');
        else
        $(this).children(".plusminus").text('+');
    });
});
</script>
</head>
<h1><a href="https://blog.theonlytutorials.com/simple-jquery-accordion-menu-script-ready-to-use-code/">https://blog.theonlytutorials.com - Simple jQuery Accordion Menu Script</a></h1>
    <div class="menu_container">
        <p class="menu_head">Lorem Ipsum<span class="plusminus">+</span></p>
            <div class="menu_body" style="display: none;">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>
        <p class="menu_head">About Theonlytutorials.com<span class="plusminus">+</span></p>
            <div class="menu_body" style="display: none;">
            <p>theonlytutorials.com is providing a great varitey of tutorials and scripts to use it immediate on any project!</p>
            </div>
    </div>
</html>

 

You can see the demo or can download the script it uses it on your project!

demodownload

 

22 thoughts on “Simple jQuery Accordion Script Ready to use Code

      1. It won’t work because of this lightbox thumbnail script which is on the same page. anyone know how to fix it is much appreciated

  1. Hi..
    Thank you for making the only actual tutorial that I’ve been able to find. Other ‘tutorials’ haven’a actually explained how to do things, but you did so, very clearly.
    Thanks.

    1. it won’t work because of I’m using the lightbox script on the same page, this one is giving me the problem

    1. You need to change the CSS Styles to change the color and other things!.

  2. This is a nice tutorial easy to use. How can I make the 1st panel open when the page loads?

    1. after $(“.menu_body”).hide();

      add the below line
      $(“.menu_head:first-child”).next(“.menu_body”).slideToggle(600);

      1. Thanks for your reply. Also, the following code has be added to handle the ‘+’ ‘-‘ sign
        $(“.menu_head:first-child”).children(“.plusminus”).text(‘-‘);

        However when the 2nd panel is clicked, along with the 2nd panel being open, the the first panel will remain open and not getting closed. Any idea how this can be fixed?

  3. Thank you admin and other who helped me in finding the best accordion I have ever used… simple and easy

    1. Hi Buddy,

      Use this code instead of that and let me 🙂


      $(document).ready(function(){
      $(".menu_body").hide();
      //toggle the componenet with class menu_body
      $(".menu_head").click(function(){
      if ($('.menu_body').is(':visible')) {
      $(".menu_body").slideUp(600);
      $(".plusminus").text('+');
      }
      $(this).next(".menu_body").slideToggle(600);
      $(this).children(".plusminus").text('-');
      });
      });

      1. Oh my goodness – I’m so sorry for all the messages. It works as you posted.

        I would like it open the first tab upon loading, but other than that its doing exactly what I expected it to.

        Thank you

Leave a Reply

Theme: Overlay by Kaira
Agurchand