How can we make best Accordion using jQuery?

Before jumping to how to make an Accordion using jQuery, we should first know what is Accordion on a website and why we use it?

What is Accordion on the Website?

Accordion

Accordion in the website is like vertical blocks or lists, and with the help of these blocks or lists, we can show or hide content. Accordions are useful when you want to toggle between hiding and displaying a large amount of content on the page. It creates a better user experience. So make Accordion using jQuery.

How can we make Accordion using jQuery?

Accordian using jQuery

Here are the steps to make Accordion using jQuery

10-20 min 15 minutes

Add jQuery file

how to make accordion using jQuery

For making an Accordion, You first have to add jQuery to your HTML file.

Make Div

how to make accordion using jQuery

Now, after attaching jQuery, you have to make blocks with div. You can use class or id. I am here using class, but if you are id use # instead of . in the CSS.
<div class="s1"></div>
<div class="s2"></div>
<div class="s3"></div>
<div class="s4"></div>
<div class="s5"></div>
<div class="s6"></div>
<div class="s7"></div>
<div class="s8"></div>

Write CSS

how to make accordion using jQuery

After making Div, write CSS of these div classes. I am here using Internal CSS, so we write CSS in <style> tag.

<style>
.s1,.s3,.s5,.s7{ width:500px;
height:50px;
background-color:black;
border:1px solid yellow; }

.s2{ width:502px;
height:100px;
background-color:yellow; }

.s4,.s6,.s8{ width:502px;
height:100px;
background-color:yellow;
display:none; }

</style>

Write jQuery

how to make accordion using jQuery

Now, to execute the Accordion, we write jQuery </script> in tag.
<script>

$(“.s1”).click(function(){
$(“.s2”).slideDown(1000);
$(“.s4”).hide();
$(“.s6”).hide();
$(“.s8”).hide();
})

$(“.s3”).click(function(){
$(“.s4”).slideDown(1000);
$(“.s2”).hide();
$(“.s6”).hide();
$(“.s8”).hide();
})

$(“.s5”).click(function(){
$(“.s6”).slideDown(1000);
$(“.s4”).hide();
$(“.s2”).hide();
$(“.s8”).hide();
})

$(“.s7”).click(function(){
$(“.s8”).slideDown(1000);
$(“.s4”).hide();
$(“.s6”).hide();
$(“.s2”).hide();
})

</script>

Make Accordion using jQuery UI

Accordion Using jQuery UI

jQuery UI is an advanced JavaScript library that includes effects, widgets, themes, and much more. This jQuery further helps us in writing less code. So for Making Accordion using jQuery UI, You have to attach jQuery UI files.

  • Just find and attach three jQuery UI files in the HTML file as seen in the image.
  • After attaching jQuery, make div or paragraph whatever you want.
<div class="Sanjay">
	<h3>Home</h3>
		<p>
Web design is an essential part of everyone in any form of social media, entertainment, and downloading things for educational purposes in the form of a website. So web design courses give the real picture of yourself so everybody can get good knowledge about our product or business. Everyone wants a good website, and he needs the best website designer to create a website for publicity, and these web design courses help them create an appropriate website design with web design courses. For more visit softwareschooling</p>
		<h3>About</h3>
		<p>
Web design is an essential part of everyone in any form of social media, entertainment, and downloading things for educational purposes in the form of a website. So web design courses give the real picture of yourself so everybody can get good knowledge about our product or business. Everyone wants a good website, and he needs the best website designer to create a website for publicity, and these web design courses help them create an appropriate website design with web design courses. For more visit softwareschooling</p>
		<h3>Contact</h3>
		<p>
Web design is an essential part of everyone in any form of social media, entertainment, and downloading things for educational purposes in the form of a website. So web design courses give the real picture of yourself so everybody can get good knowledge about our product or business. Everyone wants a good website, and he needs the best website designer to create a website for publicity, and these web design courses help them create an appropriate website design with web design courses. For more visit softwareschooling</p>
	</div>
  • Now, to execute the Accordion, we write jquery in <script> tag.
<script>
		
    $( ".sanjay" ).accordion();
  $(".sanjay").accordion({ event: "mouseover" });

	</script>

If you want to remove mouseover effect just delete this yellow text.

Why to use Accordion on a website?

You can easily make Accordion with the help of Jquery as it we can make Accordion with jquery with less coding. So write less and do more.

Accordion looks good on the website; More people used Accordion in their websites.

Accordion shortens pages of a website, which further reduces scrolling and hence creates a better user experience.

Frequently Asked Questions for Accordion Using jQuery

What does Accordion mean?

Accordion in the website is like vertical blocks or lists, and with the help of these blocks or lists, we can show or hide content. Accordions are useful when you want to toggle between hiding and displaying a large amount of content on the page.

How does Accordion work in jQuery?

It is easy to create Accordion with jQuery, Just follow above mentioned steps to make accordion using jQuery.

How can we make Accordion dynamically using jQuery?

You can easily make an Accordion with the codes mentioned earlier. Yes, you can make it dynamically by giving border-radius, or you can change colors, or you can create a border, or you can also use the hover effect.

What is an Accordion on a website?

Accordion in the website is like vertical blocks or lists, and with the help of these blocks or lists, we can show or hide content. Accordions are useful
when you want to toggle between hiding and showing a large amount of content on the page.

I want Accordion jQuery examples with source code.

Yes, I have mentioned the jQuery Accordion Example with source code, so copy code and keep practicing to make your future better.

Please get back to us if you need any further assistance regarding What is Accordion on the website and How can we make Accordion using jQuery; let us know how else we can help.
For more, Visit Softwareschooling.

Leave a Comment