Advertisement

Creating an Accordion with HTML, CSS & jQuery

An accordion is usually associated with FAQ areas. If printed to the page, FAQs could stop users from finding the answers they’re after due to all the text they’re presented with.

That’s a good argument as they show a simple outline of the content. Imagine browsing an FAQ and you had to scroll all the way down through loads of sections to find the answer, it would be a painful. If you could simply scroll the titles and have the content hidden, it would allow you to scan much faster, therefore giving a better experience.

You might also like: Creating Tabs with HTML, CSS & jQuery

Table of Contents

  1. Skip to The HTML
  2. Skip to The CSS
  3. Skip to The jQuery

Final result: Coded accordion with HTML, CSS and jQuery


1.) The HTML Structure

Finished HTML

When coding up components I like to follow the BEM structure. Some of you will notice it’s not actual BEM. That’s because I follow a basic principle which uses nested-naming. For example, the entire element has an .accordion-section inside it, which is then followed by an .accordion-section-title.

This approach can have it’s drawbacks, yet I’ve found it to be sustainable on larger projects because it makes me think about how many elements I’m nesting and if it’s necessary.

It also keeps my Sass organised, therefore it avoids too much nesting and keeps things readable.

<div class="accordion">
	<div class="accordion-section">
		<a class="accordion-section-title" href="#accordion-1">Accordion Section #1</a>

		<div id="accordion-1" class="accordion-section-content">
			<p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>
		</div><!--end .accordion-section-content-->
	</div><!--end .accordion-section-->
</div><!--end .accordion-->

2.) The CSS Styling

Finished CSS

There are a few things going on here. First of all see the overflow:hidden; on the main element. This is done to give the rounded corners effect on the sections, yet stop things hanging over the edge.

I’ve used comments to indicate where any type styling is placed. I do this on all projects to keep things organised. In Sass I write it as // Type. When you leave a code comment in a Sass file with the two slashes it doesn’t show up in the compiled CSS.

/*----- Accordion -----*/
.accordion,
.accordion * {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

.accordion {
	overflow:hidden;
	box-shadow:0px 1px 3px rgba(0,0,0,0.25);
	border-radius:3px;
	background:#f7f7f7;
}

/*----- Section Titles -----*/
.accordion-section-title {
	width:100%;
	padding:15px;
	display:inline-block;
	border-bottom:1px solid #1a1a1a;
	background:#333;
	transition:all linear 0.15s;
	/* Type */
	font-size:1.200em;
	text-shadow:0px 1px 0px #1a1a1a;
	color:#fff;
}

.accordion-section-title.active,
.accordion-section-title:hover {
	background:#4c4c4c;
	/* Type */
	text-decoration:none;
}

.accordion-section:last-child .accordion-section-title {
	border-bottom:none;
}

/*----- Section Content -----*/
.accordion-section-content {
	padding:15px;
	display:none;
}

3.) The jQuery Functionality

Finished jQuery

$(document).ready(function() {
	function close_accordion_section() {
		$('.accordion .accordion-section-title').removeClass('active');
		$('.accordion .accordion-section-content').slideUp(300).removeClass('open');
	}

	$('.accordion-section-title').click(function(e) {
		// Grab current anchor value
		var currentAttrValue = $(this).attr('href');

		if($(e.target).is('.active')) {
			close_accordion_section();
		}else {
			close_accordion_section();

			// Add active class to section title
			$(this).addClass('active');
			// Open up the hidden content panel
			$('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
		}

		e.preventDefault();
	});
});

Code Outline/Setup

It’s a best practice to outline the code you’re going to write before you start, especially with something like JS.

Here is the code we need and in this case we would write it out in a procedural fashion, then move on to making it more modular. As a result we get the following two examples:

$(document).ready(function() {
	function close_accordion_section() {
		// Close everything up
	}

	$('.accordion-section-title').click(function() {
		// Grab current anchor value
		var currentAttrValue = $(this).attr('href');

		// Open and close here
	});
});
$('.accordion-section-title').click(function() {
	// Grab current anchor value
	var currentAttrValue = $(this).attr('href');

	$('.accordion .accordion-section-title').removeClass('active');
	$('.accordion .accordion-section-content').slideUp(300).removeClass('open');

	$(this).addClass('active');
	$('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
});

From there we can move on to the modular version of the code by adding functions and so on:

function close_accordion_section() {
	$('.accordion .accordion-section-title').removeClass('active');
	$('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}

Accordion Conclusion

In conclusion they can be very useful, as I said in the intro. However, be aware they should only be used in cases where they’re beneficial, as is the case with any component.

By improving your code as you go, you’ll learn to just make it modular from the start.

If you have any questions or comments just leave a comment below!

You might also like: Create a Fading Popup Modal with jQuery

Advertisement

Web designer and developer from Southampton, UK.


Leave a Comment

Comments (192)

Steffan

10th, Sep 2014 at 10:28 pm

Hey thanks for the great tutorial! Does the accordion work in IE8+? Thanks!

Reply

Seb Kay (Author)

11th, Sep 2014 at 9:04 am

Yes it works good in IE8+. Some of the CSS may require editing but I’ve just checked and it works fine.

Reply

Larzy

18th, Sep 2014 at 2:27 pm

Thanks for this!

So the html goes on my page the styling goes in the style sheet, but where do I paste the jquery code ?

Reply

Seb Kay (Author)

19th, Sep 2014 at 7:31 am

That can go in a separate .js file or can be put in the header of the page bewteen a few script tags.

I’d advise doing some research on JavaScript and jQuery if you’re unsure about them 🙂

Reply

Jonathan

22nd, Sep 2014 at 5:45 am

I’m having trouble getting lines 35-37 of the CSS to work.

.accordion-section:last-child .accordion-section-title {
border-bottom:none;
}

I still end up with a bottom border on the last link.

Reply

Seb Kay (Author)

22nd, Sep 2014 at 8:07 am

Hey Jonathan,

What browser are you testing the accordion in?

Reply

Jonathan

27th, Sep 2014 at 5:06 am

I’m using chrome. I ended up using this:

.accordion-section-title:nth-last-child(2) {
border-bottom:none;
}

That seems to work. I’m not sure why though.

Reply

George

24th, Sep 2014 at 2:50 pm

Why would both be expanding at the same time?
VS one opening and one closing?

Thanks,
George

Reply

Seb Kay (Author)

26th, Sep 2014 at 7:55 am

Hey George,

It’s quite likely that the class of .open on the sibling sections isn’t being applied.

Reply

Biagio

25th, Sep 2014 at 5:50 pm

Hi!
Thanks For the tutorial you made.
I have a question:
How to keep one div always open?

Reply

Seb Kay (Author)

26th, Sep 2014 at 7:57 am

Hi Biagio,

You can add the class of .active to the section title and .open to the section directly into the HTML. Then on page load they will already be open.

Reply

Imam

31st, Oct 2014 at 11:12 am

Need help, this doesn’t work for me:
<div id=”accordian-1″ class=”accordion-section-content open”>

The .active did work perfectly btw…

Reply

Jonathan

27th, Sep 2014 at 5:16 am

I’m trying to do something similar to accordion for displaying a form, and I’ve been looking through the jQuery. I’m wondering what adding the class ‘open’ does as I don’t see it in the CSS. It seems to be important. What does that do?

Reply

Seb Kay (Author)

1st, Oct 2014 at 10:42 am

You need to add the .open class to the content section and .active to the section link 🙂

Reply

Liam

1st, Oct 2014 at 9:17 am

A noob at this, wondering how I can change the overall height of the accordion, to accommodate more entries and fill the web page.

Reply

Seb Kay (Author)

1st, Oct 2014 at 10:43 am

Could you explain a little more what you mean. The accordion should already have dynamic height depending on the content inside.

Reply

Liam

4th, Oct 2014 at 8:00 am

Thanks for the reply. What I’m building is an FAQ page, with a series of questions and hidden answers that expand within the accordion.

When I add the accordion to the web page, and add content, the height of the box expands only to a point and then shows a slider on the right.

So no matter how many objects (questions) I add, the container doesn’t get bigger than a certain point (something like 300 or 400 pixels. You have to scroll up and down within that bounding box.

I would like the accordion to fill up the entire web page, between 1200-1500 pixels tall.

Is this possible? Again I’m a noob, and I’m learning as I go. Thanks for your help.

Reply

Seb Kay (Author)

4th, Oct 2014 at 6:41 pm

OK I understand what you’re trying to achieve and yes It’s completely possible. Can you send me a link to a live version or post your code to JSFiddle? That way I can help a little better 🙂

Reply

tj

5th, Mar 2015 at 5:02 am

Could you share the solution for this? I would also like for the accordion to open and fill the entire browser page.

Reply

Costin

17th, Oct 2014 at 1:28 pm

Great stuff, man, but I have one question:
I’m trying to make a menu with this. I want the accordion section content to show on hover (and I did that by changing click with hover in the script) , but I also want the accordion section title to direct to another page on my website.
Thanks

Reply

Costin

17th, Oct 2014 at 3:03 pm

I did made it work by using the alternate attribute instead of href to direct to the #accordionx div. I placed the url to the page under the href. Let me know if this is a good solution and if you have a better one.
Thanx

Reply

Cosmin

29th, Oct 2014 at 9:07 pm

Hello,

It seems that even if I add the “active” and “open” class accordingly, the accordion does not open on load :/ Have any idea on what am I doing wrong?

Regards!

Reply

Adrian

31st, Oct 2014 at 8:31 am

Hello , the tutorial is amazing . I would like to know where to put the jquery code. I put it between but does not work . Thank you !

Reply

Adrian

31st, Oct 2014 at 8:58 am

It works now. Thank you !

Reply

Cosmin

1st, Nov 2014 at 12:02 pm

Hello,

In order to remove issues and glitches when forcing an accordion section to be opened on load, I used this at the top of the jQuery code :

$('#accordion-1').slideDown(300).addClass('open');

You can call which-ever ID you want to be opened on load.

Regards!

Reply

Scott

6th, Nov 2014 at 2:22 am

Great script. Anyone know how to change so that multiple windows can be opened at the same time.? In other words, if a user expands an accordion-section and then expands another, they both stay open until the user closes them.

Reply

Topher

12th, Mar 2015 at 11:56 am

Hi Scott, I think this script modification will do what you’re looking for –

Just make sure to compile the LESS’d css before copy/pasting
Nice website you have by the way. Your business partner looks like a legend.

Reply

Marcus

19th, Nov 2014 at 2:31 pm

Hi, great script!
It is possible to have two accordions on the same page?

Reply

Priti

21st, Nov 2014 at 5:07 am

It is absolutely possible to have have multiple accordions on same page. The problem is just that only one window of any one accordion can remain open at a point of time.

Someone can try below code as a solution to this issue:

$(‘.accordion-section-title’).click(function (e) {
// Grab current anchor value
var currentAttrValue = $(this).attr(‘href’);

if ($(e.target).is('.active')) {
// Remove active class from section title
$(this).removeClass('active');
// Close the hidden content panel
$('.accordion ' + currentAttrValue).slideUp(300).removeClass('open');
} else {
// Add active class to section title
$(this).addClass('active');
// Open up the hidden content panel
$('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
}

e.preventDefault();
});

Thats all on jQuery part. Rest all remains the same. Hope it helps.

Reply

Matt

22nd, Nov 2014 at 6:13 am

Trying to use an accordion for one of my websites. There is just too much stuff that needs to be broken down on the Homepage. But this tutorial doesn’t explain where these items go. Can someone break it down for me? ie HTML goes into page, CSS goes into a .css file, etc.

Reply

Vranke

6th, Jan 2015 at 9:34 am

Hi, I’m still a newbie, and I used your code on my project but the thing I cant get rid of is the a href link, its default state is always blue underline. I tried overriding it with
.accordion-section-title a{
color:white;
text-decoration:none;
}

But no luck, any suggestions?

Reply

mohammed

13th, Jan 2015 at 12:45 am

hello,
I want to say it’s a nice accordion but is there a way to have an accordion in an accordion
thx,

Reply

Seb Kay (Author)

13th, Jan 2015 at 7:51 am

Yes this should be possible, although I haven’t tested it. Let me know if you run into any problems.

The title sections of the accordion has a href value, e.g. href="#section-1". The jQuery then searches for a content section with an ID that matches, e.g. id="section-1", and opens it.

Reply

marie

15th, Jan 2015 at 9:27 am

Great and simple code, thanks a bunch!

I just have one little question according to the jQuery part:
I need to add an image above the accordion-section-title but I don’t want the image to be visible when the accordion section is not open. So, basically, I want to place the image there and show it when the user opens the section.

How would I need to modify the jQuery code to do this?

Reply

Vince

17th, Jan 2015 at 7:06 am

Thanks for the tutorial! Lets say I have reviews displaying inside the accordion and at the top of my page I have a ‘Read Reviews’ link. Is there a way to link so the page jumps down and opens the accordion?

Reply

Seb Kay (Author)

17th, Jan 2015 at 7:19 am

That would require a little extra jQuery to open the accordion. However you can jump down to the accordion by adding an ID and then referencing the ID in a link, e.g. #accordion.

Reply

Zastavljalnica

20th, Jan 2015 at 9:04 pm

Anyone have issues in IE? For me in IE accordian is automaticaly opened on load, but I dont want this!

Reply

AshB

29th, Jan 2015 at 12:58 pm

Hi,
This is great – thanks. The demo isn’t working at all in IE11, for me at least – anyone else having that problem? And how to fix? All fine in FF and Chrome.

Not even the links are working at the top (demo page) in IE.

Cheers,
Ash

Reply

Seb Kay (Author)

29th, Jan 2015 at 1:09 pm

Hi AshB,

I’ve just fixed it for you. Sorry about that!

Reply

AshB

29th, Jan 2015 at 1:26 pm

Ah yes, excellent – thanks. What was it? The css or the js? Now trying to fix mine, but I can’t see where the update is.

Reply

Seb Kay (Author)

29th, Jan 2015 at 1:28 pm

Don’t worry it wasn’t something wrong with the code above, the problem was how I set up the CSS on the demo page.

Reply

Sergey

12th, Feb 2015 at 2:36 am

Hello, I am trying to use the code to see if I can get it to work but on Firefox and Safari, it will not open the hidden content.

Do you know why this is or am I doing something wrong? Also, is there a way to instead of having the title be text, it be an image instead?

Thanks for the assistance,
Sergey

Reply

Rebeckah

12th, Feb 2015 at 4:13 pm

Hi, I am can’t get the sections to open up when I click on them. What did I do wrong?

Reply

ozan

18th, Feb 2015 at 4:50 pm

Thanks for this tutorial. It helped me very well 🙂

Reply

vinoth

24th, Feb 2015 at 11:46 am

Thank you…

Reply

emre

26th, Feb 2015 at 7:57 pm

YOU
Are
The
MAN!!!

Thanks Man

Reply

mark

4th, Mar 2015 at 2:38 pm

I’m also trying to get the accordion to open on a particular tab by default, but it’s not working for me.
Can someone please clarify where the amendments happen and what they look like.

this is what I have got (I’ve added ‘open’ and ‘active’ to the div section and title section respectively – as shown below) –

My title here

Not sure if the ‘open’ class should be added there or to the ‘accordion-section-content’ class instead? but I tried both and it didn’t work.
is there anything else I should do?
thanks

Reply

Seb Kay (Author)

5th, Mar 2015 at 6:37 am

If you post an example to JSFiffle I’d be happy to take a look for you.

Reply

mark

5th, Mar 2015 at 10:47 am

Thanks Seb,
(just signed up for JSFiddle)
here is the code I used:
https://jsfiddle.net/yorkshireweb/2dc6L1az/2/

Reply

Seb Kay (Author)

5th, Mar 2015 at 6:59 pm

Hey Mark,

Here’s an updated version with it opening on the first one by default.

To achieve this I added a new classes of .accordion-section-content.active and made is display:block;. Then I just added that class to the accordion content I want open by default.

Hope this helps!

Reply

mark richardson

9th, Mar 2015 at 11:43 am

thank you very much Seb, that works a treat!
well done

Håkan

9th, Mar 2015 at 8:58 am

Great article! I have a question, is it possible to add arrows that changes depending if the accordion section is open or closed?

Reply

Seb Kay (Author)

10th, Mar 2015 at 8:22 am

Hey Håkan,

yes that should be relatively easy to implement. All you need is a pseudo-element, like ‘:after’, use some absolute positioning and apply a CSS class of either ‘show’ or ‘hide’ with the jQuery. Just like we do with changing the ‘open’ class for the accordion section.

Reply

Håkan

10th, Mar 2015 at 11:34 am

Thanks alot Seb, I will give that a try.

Reply

Steven

11th, Mar 2015 at 2:56 am

First off, great plug-in, thanks. I am trying to use it for a sign-up type page, and would like to know how to make it so when a button inside a particular slide in the accordion is pressed, another one opens, and the current one closes? Thanks

Reply

Seb Kay (Author)

11th, Mar 2015 at 9:17 am

This would require a little more jQuery to achieve. To do it, you just need to create a new click function that applies to the button you want, then open the accordion section you want according to the “href” of the button, a lot like what is above.

Let me know if you’d like any help with the actual code for this or if you’d like to give it a go yourself!

Reply

Steven

13th, Mar 2015 at 3:43 am

Thanks for the prompt reply! I have attempted to do it on my own, but I can’t get the current slide to close. Could you please help with the actual code for this. Thanks again, so much.

Reply

Steve

12th, Mar 2015 at 11:00 am

Nice, shame it doesn’t work in IE 11.

Reply

Topher

13th, Mar 2015 at 6:13 pm

It should work in IE11…. it is for me anyways. Make sure you don’t have javascript blocked and/or sometimes compatibility mode can screw things up…

Reply

Cees

15th, Mar 2015 at 1:12 pm

Any chance of having the source code in a downloadable ZIP?

Cheers!

Reply

Seb Kay (Author)

16th, Mar 2015 at 11:08 am

Sure, I’ll try to find some time later on to put the code in a ZIP file for you 🙂

Reply

Seb Kay (Author)

16th, Mar 2015 at 3:11 pm

I’ve now added a download link for this tutorial. You can find the download button at the top of this page. Hope this helps!

Reply

Mohamed Magdy

22nd, Mar 2015 at 8:34 am

First of all I would like to thank you about this great plug-in, it really is nice.

I have a little issue in scroll bar, it has some glitch after I click on any section.

I also have a little a question, how can I prevent the browser to scroll to the open section?

Regards,

Reply

Seb Kay (Author)

23rd, Mar 2015 at 9:07 am

Hey Mohamed, can you give me an example of your code using JSFiddle? That way I can take a look and analyse the problem.

Reply

Mohamed Magdy

26th, Mar 2015 at 8:20 am

Thank for your reply, Sure thing.
http://jsfiddle.net/S3cur1ty/rzuvoLjt/

Reply

Seb Kay (Author)

30th, Mar 2015 at 9:49 am

Sorry for the late reply Mohamed. I can’t replicate the problem on JSFiddle, so it sounds like a conflict with the current styles of your site. Can you do a little investigating with your browsers developer tools and let me know what you find?

In terms of the browser scrolling, there’s actually code to prevent this already in the plugin. So it must be a conflict with something else. Are you using any other plugin alongside the accordion code?

Reply

Jan Valentik

24th, Mar 2015 at 9:16 pm

It is possible scroll page to clicked title after slideDown.
Thank you.

Reply

Katharine

1st, Apr 2015 at 2:09 pm

Hello! I’m fairly new to jQuery and have a few questions about developing/customizing the function. Which CLASS do you input when you .remove/.open and how do you input all the variables? Do you repeat that line of code for the number of accordion tabs you have #accordion1, #accordion2 etc.?

Reply

Seb Kay (Author)

2nd, Apr 2015 at 6:11 am

Hi Katherine, great question.

It can be a little confusing at first, I know it was for me. For removing the class you have a base class, for example .book, then you use the jQuery to .remove/.open that pages.

No, the code is written to be as small as possible. This means that the jQuery only needs to run once to affect all the accordion section. This is called OOP (Object Oriented Programming). As opposed to procedural programming, which is when the code isn’t optimised or structured in a specific way.

Hope this helps! 🙂

Reply

Justin Olson

3rd, Apr 2015 at 6:47 pm

Also fairly new to web dev. Where in the CSS, is the position/size defined. Say I wanted to make the accoridan cover just the top right corner of the page.

Reply

Joe

10th, Apr 2015 at 1:30 am

I’m pretty new to jQuery/JS, os please forgive me if I get some of the terminology wrong. I see that the click (event?) is coming off . The script gets the anchor value from the href attribute. What if I wanted to have it come from some other element, such as a or , for example? How would I adjust your code.

The reason I ask, is I need to have a separate link nested in the element that, by default, is currently set up as:

Ideally, my code would be something like this, as my link needs to be part of the section title:

I know I would have to change the cursor in the CSS to the pointer, but how do I adjust the jQuery?

Thanks in advance!

Reply

Joe

10th, Apr 2015 at 5:56 pm

UPDATED to fix formatting:

I’m pretty new to jQuery/JS, os please forgive me if I get some of the terminology wrong. I see that the click (event?) is coming off the anchor link. The script gets the value from the href attribute. What if I wanted to have it come from some other element, such as a or div or h3, for example? How would I adjust your code.

The reason I ask, is I need to have a separate link nested in the trigger element that, by default, is currently set up as:

&lt;a class=&quot;accordion-section-title&quot; href=&quot;#accordion-1&quot;&gt;Accordion Section #1&lt;/a&gt;

My code need to be something like this, with a link that is nested within the accordion-section-title element:

&lt;div class=&quot;accordion-section-title&quot; href=&quot;#accordion-1&quot;&gt;Accordion Section #1 &lt;a href=&quot;/signup/&quot;&gt;CTA link floated right&lt;/a&gt;&lt;/div&gt;

I know I would have to change the cursor in the CSS to be a pointer because of it being a div, but how do I adjust the jQuery to make it work with this change?

Thanks in advance!

Reply

Sage

20th, Apr 2015 at 1:30 am

First, this is an amazing tutorial and solves a specific problem for me. That being said, I am having trouble extending the accordion to more than 3 units. I am a complete newbie and am embarrassed to ask this but, why can’t I just copy and paste to make a fourth accordion section like I have below. When I do this the accordion doesn’t work and the styling (rounded border) is gone. Do I need to change something in the accordion.js? Any suggestions?

   &lt;div class=&quot;accordion-section&quot;&gt;<br />
				&lt;a class=&quot;accordion-section-title&quot; href=&quot;#accordion-4&quot;&gt;Accordion Section #4&lt;/a&gt;<br />
				&lt;div id=&quot;accordion-4&quot; class=&quot;accordion-section-content&quot;&gt;<br />
					&lt;p&gt;Content&lt;/p&gt;<br />
				&lt;/div&gt;&lt;!&#8211;end .accordion-section-content&#8211;&gt;<br />
			&lt;/div&gt;&lt;!&#8211;end .accordion-section&#8211;&gt;<br />
		&lt;/div&gt;&lt;!&#8211;end .accordion&#8211;&gt;<br />
Reply

Seb Kay (Author)

20th, Apr 2015 at 8:29 am

Hi Sage,

It looks like you’ve copied the closing .accordion div at the bottom. Remove this line if it’s appearing twice and it should work:


&lt;/div&gt;&lt;!&#8211;end .accordion&#8211;&gt;<br />
Reply

Sage

23rd, Apr 2015 at 7:56 am

Thanks Seb. I guess it was getting late and I clearly wasn’t paying attention.

Reply

Emmanuel

20th, Apr 2015 at 4:05 pm

hi, I would to know if the jquery function can be use for mor of 3 sections, I want to use it for a FAQ section of 19 questions

Reply

Seb Kay (Author)

20th, Apr 2015 at 5:35 pm

You can have as many section as you like. All you need to do is replicate the last section as many times as you like, then change the numbers for each one.

Reply

Josh

24th, Apr 2015 at 8:35 pm

I am having trouble get the accordion to start closed.


<p>jQuery(document).ready(function() {<br />
	function close_accordion_section() {<br />
              jQuery(&#8216;.accordion .accordion-section-title&#8217;).removeClass(&#8216;active&#8217;);<br />
		jQuery(&#8216;.accordion .accordion-section-content&#8217;).slideUp(300).removeClass(&#8216;open&#8217;);</p>
<p>	}</p>
<p>	jQuery(&#8216;.accordion-section-title&#8217;).click(function(e) {<br />
		// Grab current anchor value<br />
		var currentAttrValue = jQuery(this).attr(&#8216;href&#8217;);</p>
<p>		if(jQuery(e.target).is(&#8216;.active&#8217;)) {<br />
			close_accordion_section();<br />
		}else {<br />
			close_accordion_section();</p>
<p>			// Add active class to section title<br />
			jQuery(this).addClass(&#8216;active&#8217;);<br />
			// Open up the hidden content panel<br />
			jQuery(&#8216;.accordion &#8216; + currentAttrValue).slideDown(300).addClass(&#8216;open&#8217;);<br />
		}</p>
<p>		e.preventDefault();<br />
	});<br />
});<br />
  $(function() {<br />
    $( &quot;#accordion&quot; ).accordion({<br />
    collapsible: false,<br />
    active: true<br />
    });<br />
  });<br />
  &lt;/script&gt;
Reply

Michele

27th, Apr 2015 at 4:09 pm

Thanks for this! It’s awesome for people like me…who know just enough to be dangerous.

Is there an easy way to resize the width of the accordions? I have a page that’s 662px wide and I can’t seem to resize them. (I’m thinking it’s something stupid that I’m missing, so I’m blaming the surgery that I had last week and NOT the fact that I don’t know what I’m doing.)

Reply

Ken

28th, Apr 2015 at 6:22 pm

In the accordion-section-title object of the CSS (demo.css) change the width:100% to something that fits your needs.

Reply

Ken

28th, Apr 2015 at 6:34 pm

Also, in the Defaults.css, at /* line 41, ../scss/main.scss */

For the .main element, change the width:1000px; there to something that fits your site. I have found that width: 100%; did the job for me.

Reply

Brendan

30th, Apr 2015 at 5:54 am

Hey Michele,

I followed the same process while adding my own styles. You can enter max-width changes and other resets in the top here’s an example ;

.accordion, .accordion * {
max-width: 870px;
margin: 0 auto;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

You can make it much more responsive this way :).

Reply

chanhope

4th, May 2015 at 9:04 am

how can i make the first one opened as default !

Reply

Rachel

1st, Jun 2015 at 12:14 pm

Did you figure this out? I have the same question!

Reply

Justin

10th, May 2015 at 1:49 am

Hey, thanks for this tutorial! Very good stuff.
I’m still learning CSS and jQuery and I’m using Sass with Bootstrap on WordPress. I put the jQuery into my app.js that I have enqueued and everything else that I have in there works fine except for your code. Like I said, I don’t know jQuery that well yet so I’m not sure what to change. I just copied your code from the page and pasted into my app.js. Is there another file I should have or some other functions? Thank you so much.

Reply

Justin

10th, May 2015 at 1:55 am

Actually, nevermind; I figured it out. In your code above on the page you have “$” in front of the various lines but in the downloadable version you have “jQuery” instead. Replacing the “$”s with “jQuery” got it working.

Reply

Ansar ali

11th, May 2015 at 8:23 am

page load it is working fine but there is an issue with on event click . can you please explain . how can i Reload the function without reload the page

Reply

Seb Kay (Author)

11th, May 2015 at 11:27 am

I suggest trying jQuery’s “on click” function. That usually solves the issue, like this:


$(‘.accordion-section-title’).on(‘click’, function() {
// JS goes here…
});
Reply

Eric

11th, May 2015 at 4:02 pm

This is working great for me with one exception: my content is long within each section and when you click to open the accordion, is scrolls to the bottom of that section. Not a good user experience as you then need to manually scroll back up to the top of that section. I am not very strong in jquery and am struggling to figure out how to fix this.

Reply

Seb Kay (Author)

12th, May 2015 at 7:48 am

Do you have any other JS plugins active on your site? It sounds like a conflict, because I’ve run a quick test on the demo and I’m not getting the same result. If you do have other plugins active, which ones?

Thanks for reading!

Reply

kb

9th, Aug 2015 at 4:47 pm

Hi, I’m having this problem also “my content is long within each section and when you click to open the accordion, is scrolls to the bottom of that section”

I do have various other jquery plugins on the page but I don’t think there’s a conflict, I tried binding jquery-scrollto to the click function of your jquery, it had an effect but not the effect I was looking – it only worked for the first sections that are the same height as each other. My sections are different sizes.

If I click on the lowest accordion section first and then click each section back to the top, there’s no issue. Its like its working but upside down for me! haha.

Could you aid me with this please

Reply

Brett Wray

18th, May 2015 at 6:17 am

This is great! And I also liked the other tutorials, Thanks!

I’m trying to only make it 50% of the width, but I want it to be centered. I tried to take the solution you gave in the tabs tutorial, but couldn’t get it to work. How do you suggest getting them to be centered?

Reply

Seb Kay (Author)

18th, May 2015 at 8:34 am

Hey Brett. Thanks, I really appreciate it! The best way to get it centred is to simply wrap it in another div and add margin:0px auto;. If that doesn’t work, or it’s what you referring to, add your code to JSFIddle and I’ll take a look 🙂

Reply

Brett Wray

19th, May 2015 at 5:53 am

Hey! I tried that one out and couldnt get it to work 🙁 I tried a few other little hacks I could find online but no success. Here is a link to the fiddle : https://jsfiddle.net/wzfoowdo/14/ and here is a link to the codepen http://codepen.io/BrettWray/pen/RPRBep

Reply

Brett Wray

20th, May 2015 at 5:07 am

After a lot of messing around with different things, I found the solution. And it was way so simple. Just added text-align center to the parent div .accordion, .accordion *

Thanks for replying and again thanks for all of the tutorials, your style is easy to follow and you actually take the time to explain why you do what you do. Super helpful.

Reply

Seb Kay (Author)

20th, May 2015 at 7:40 am

Glad you found the solution Brett! No problem, I’m just really glad you enjoyed it 🙂

Sebastian

29th, May 2015 at 8:04 pm

Hello, and thank you so much for this cool accordion!

I was wondering if it would be possible to have multiple accordions on the same page?

When I click on the 2nd accordion, it opens the 1st one – there is no way to open the 2nd.

Am I missing something here?

Regards,
Sebastian

Reply

jl

19th, Aug 2015 at 11:13 pm

Did you ever figure this out? I’m trying to put multiple drop downs on a page, but when I click on one, they all open 🙁

Reply

jl

19th, Aug 2015 at 11:17 pm

Never mind – I just figured it out!

Reply

Derek

9th, Nov 2015 at 4:16 pm

How did you figure this out?

Reply

Joe

15th, Jun 2015 at 1:42 pm

First off, you’re amazing. Thanks so much for sharing this accordion with the community.

Is there a way I can select a tab (for example tab 3) to be open on page load?

Reply

vlad

13th, Jul 2015 at 10:44 am

i asked the same question but just figured it out:
to open by default certain tab here for example #3
you need to do 2 steps:
1. add class ACTIVE to a tab you want to be active: (it will avoid reopening right away if you click)
class=”accordion-section-title active”

2. Add a row below your jquery: (just show your tab)

$(‘#accordion-3’).show();

Reply

Ollie

15th, Aug 2015 at 3:10 pm

thanks a lot mate, this was exactly what i was looking for!
and thanks a lot for the very lean code for this accordion, it’s awesome!!

Reply

Chandan

8th, Jul 2015 at 2:28 pm

In the method : $(‘.accordion-section-title’).click(function(e)
If one is facing trouble with the line : ( the active accordion on click collapses and expands immediately )
if($(e.target).is(‘.active’)) {

Replacing it with :
if($(this).is(‘.active’)) {

works great as well, and it also seems more intuitive as it checks for the “this” i.e. current accordion title being clicked.

Cheers

Reply

Sofia

13th, Aug 2015 at 4:57 pm

Thank you so much for your comment, I was going crazy.
With that replacement it works perfectly in my website! 🙂

Reply

satriyoz

14th, Jan 2016 at 2:03 am

Wow, thankyou very much..
this is exactly what i looking for.

FYI, i put


$(‘#accordion-1’).show();
just before

$(‘.accordion-section-title’).click(function(e) {
Reply

luke

20th, Jan 2016 at 5:28 pm

You are my HERO ! I have exactly the same error with this auto collapse, Your post work for me perfect.

Reply

vlad

13th, Jul 2015 at 9:44 am

thanks for tutorial Seb! Very nice an easy!

could you please advise having a first open tab onLoad ?

Reply

Pingbacks (1)

Advertisement

Inspirational Newsletter

Join the newsletter to get the best articles, tutorials and exclusive freebies every two weeks.

No spam. You can unsubscribe at any time.