How you can create an Accordion jQuery snippet using jQuery, CSS and HTML? In this tutorial, we’ll be covering up how to create a dynamically changeable nested accordion using HTML <ul> Tag & CSS. Also, It auto collapse the previously clicked section when the user clicks on another.

If you have already read Simple auto collapse jQuery accordion, this is an enhanced version of that.

Why you should use an Accordion on your web pages?

Accordions are very useful especially on webpages with a substantial amount of information. how?

  • It helps you to organize content on a webpage in a way that users will love to read.
  • Delivers a great user experience by shortening scrolling on webpage.
  • Users can interact with the content & find what they are exactly looking for.

Also, it is often used to organize Q&A pages on websites. If your website is loading content dynamically, this is the ideal snippet for you.

The best example is Google also using an accordion on the search engine result page’s People also ask section to organize long content.

Accordion on Google Search Engine Result Page

Now let’s move on to the coding.

As I have mentioned earlier, The HTML structure of this Accordion jQuery snippet is different from the other typical jQuery accordions.

STEP 01 – Creating the HTML structure.

This is the HTML part of the jQuery Accordion structured with <ul> tag. You cn place whatever you want in <div> inside of the <li> tag.

<!doctype html>
<html>
<head>
<title>Auto Collapse Accordion - jQuery Accordion Demo</title>
</head>
<body>
	<section>
		<div class="container">
			<ul class="qna">
				<li>
					<h3 class="ques">Your 1st Question<span class="arrow_dd"></span></h3>
					<div class="ans">
						<p>You answer here. It can be anything and as long as you want, and contain any type of content.
						Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
					</div>
				</li>
				
				<li>
					<h3 class="ques">Your 2nd Question<span class="arrow_dd"></span></h3>
					<div class="ans">
						<p>You answer here. It can be anything and as long as you want, and contain any type of content.
						Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
					</div>
				</li>
				
				<li>
					<h3 class="ques">Your 3rd Question<span class="arrow_dd"></span></h3>
					<div class="ans">
						<p>You answer here. It can be anything and as long as you want, and contain any type of content.
						Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
					</div>					
				</li>
			</ul>
			
		</div>
	</section>
</body>
</html>

CSS Styling

@import url('https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,600,600i,700i,800');
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;}body {	line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {	content: ''; content: none;}table {	border-collapse: collapse;	border-spacing: 0;}
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,600,600i,700i,800');
body {font-family: 'Montserrat', sans-serif;}

.container {width: 750px; margin: 0 auto}
.qna h3 {background:#333333; color:#FFFFFF; padding: 30px; font-weight: 500; font-size: 18px; cursor: pointer}
.qna h3 {border-bottom: 1px solid #4A4A4A}
.qna p {background:#F7F7F7; color:#333333; padding: 30px; display: block; line-height: 1.6}
.arrow_dd{float: right; position: relative}
.arrow_dd::after {content:''; margin-top:  3px; position: absolute; width: 2px; height: 10px; background: #FFFFFF; transform: rotate(45deg); right: 19px; transition: transform .2s }
.arrow_dd::before {content:''; margin-top:  3px; position: absolute; width: 2px; height: 10px; background: #FFFFFF; transform: rotate(-45deg); right: 25px; transition: transform .2s}
.arrow_dd::after{transform: rotate(45deg);}
 .arrow_dd::before{transform: rotate(-45deg);}	
.arrow_du.arrow_dd::after{transform: rotate(-45deg);}
.arrow_du.arrow_dd::before{transform: rotate(45deg);}
	

Placing jQuery just before the JavaScript part

<script src="https://code.jquery.com/jquery-1.9.0.js"></script>

Add this JavaScript part just before the closing </body> tag

$('li .ans').hide();
		$(document).ready(function() {
    	$('h3.ques').click(
			function(e) {
			e.preventDefault();
			var dropDown = $(this).parent().find(".ans");           		
			dropDown.slideToggle(200);
			var dropDownA = $(this).parent().find("span");           		
			dropDownA.toggleClass("arrow_du");			
			$('h3.ques').parent().find(".ans").not(dropDown).slideUp(200);	
			$('h3.ques span').not(dropDownA).removeClass("arrow_du");
         });    
		});

Conclusion

Hope you’ve learned how to create adynamic jQuery Accordion in HTML, CSS and JQuery. Here you have all the code parts. Check the demo below & you can also download the file.

If you found this post is useful, don’t forget to share and support this on your favorite social media platform. Leave your comments below if this is useful or needs any improvement. Cheers! 

Author

Hi! I’m Dimuthu Freelance Web Designer, Developer, Creative Graphic Designer, Digital Marketer & Successful Blogger. Hire me! if you need any support.

Write A Comment

Pin It