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!
tried using the script, won’t work because of a script from lightbox, is there a fix for that???
Hi, Can you please tell me the error or share your code to my mail agurchand@agurchand.com. I will give you a fix
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
how to work with this when offline
This script is not working offline, because the jquery file is coming from Google CDN.
To make it work, just open the file and save it to your local
https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js
Then change this line:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script >
To (script should be in the same folder where your file is.):
<script src="jquery.min.js"></script >
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.
Thanks…exactly what I was looking for.
it won’t work because of I’m using the lightbox script on the same page, this one is giving me the problem
How do i change the theme
You need to change the CSS Styles to change the color and other things!.
Does anyone know how to add fonts to a page so clients can change them, here is a link that as an example
https://www.nexicom.net/
https://www.ganboatline.com/
Thanks
Hi Dave,
Here is the code:
https://blog.theonlytutorials.com/jquery-dynamically-change-the-font-size-of-your-website-on-run-time/
This is a nice tutorial easy to use. How can I make the 1st panel open when the page loads?
after $(“.menu_body”).hide();
add the below line
$(“.menu_head:first-child”).next(“.menu_body”).slideToggle(600);
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?
Thank you admin and other who helped me in finding the best accordion I have ever used… simple and easy
Thank you very much on this Jquery function and explanation 🙂
Regards from Serbia !
Works great however; when i select a closed header to open it, any previously opened header does not close. How can I remedy this?
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('-');
});
});
sorry…didn’t see the reply
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
How do you get the one panel to collapse when you click on another to expand?