Comments on: Creating an Accordion with HTML, CSS & jQuery

By: awesome

awesome — Tue, 09 Apr 2019 19:25:55 +0000

In reply to Seb Kay. thanks so much for this, worked perfectly!!!

By: Awesome

Awesome — Tue, 09 Apr 2019 19:04:19 +0000

Really great! The best script / solution out there! Thanks so much Seb!

By: Florin

Florin — Tue, 18 Sep 2018 20:39:36 +0000

In reply to Alex. THANK YOU FOR THIS!

By: Harish Patil

Harish Patil — Fri, 23 Mar 2018 07:25:47 +0000

In reply to Julie.

Hi i am harish patil i am a php student You’ll be my fan patilharish002@gmail.com

By: Robert

Robert — Thu, 25 Jan 2018 06:11:22 +0000

In reply to jos. your code worked!!!

By: Subhrahtoti

Subhrahtoti — Fri, 15 Dec 2017 16:00:45 +0000

I have one Panel having two child panel which is showing by default.
My requirement is to show only one different panel under main panel if java variable showTwopanel =true else show only one panel.

By: Kate

Kate — Tue, 17 Oct 2017 10:43:16 +0000

[js]
$(document).ready(function() {
$(‘.accordion .accordion-section:first-child .accordion-section-title’).addClass(‘first’);
function close_accordion_section() {
$(‘.accordion .accordion-section:first-child .accordion-section-title’).removeClass(‘first’);
$(‘.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’);
$(this).removeClass(‘first’);
// Open up the hidden content panel
$(‘.accordion ‘ + currentAttrValue).slideDown(300).addClass(‘open’);
}

e.preventDefault();
});
[/js]

By: Michael

Michael — Mon, 16 Oct 2017 05:31:17 +0000

I may be missing something but the class “open” doesn’t appear in either the markup and is not defined in the CSS. Could someone please explain how that works. Thanks.

By: Brandon

Brandon — Thu, 28 Sep 2017 12:32:36 +0000

For those wondering (like me!) how to get one accordion section to be open on initial page load, take Alex’s improved JS and add a couple lines to the end:

[html]
function close_accordion_section() {
$(‘.accordion .accordion-section-title’).removeClass(‘active’);
$(‘.accordion .accordion-section-content’).slideUp(300).removeClass(‘open’);
}

$(‘.accordion-section-title’).on(‘click’, function(e){
e.preventDefault();
var currentAttrValue = $(this).next();

if($(this).is(‘.active’)) {
close_accordion_section();
}
else {
close_accordion_section();
$(this).addClass(‘active’);
$(currentAttrValue).slideDown(300).addClass(‘open’);
}
});

// Activate first accordion item on page load. Change CSS selector as needed to work with your own HTML structure.
$(‘.accordion:first-child .accordion-section-title’).addClass(‘active’);
$(‘.accordion:first-child .accordion-section-content’).slideDown(0).addClass(‘open’);
[/html]

By: jos

jos — Tue, 26 Sep 2017 18:04:24 +0000

Opens the first!
$( document ).ready(function() {
$(‘a[href$=”#accordion-1″]’).click();

});

By: anmol

anmol — Sat, 22 Jul 2017 10:23:19 +0000

In reply to Rajesh. Sir Please tell me how i could 1st accordian be opende by default when page is refreshed

By: Nilam

Nilam — Thu, 11 May 2017 13:00:14 +0000

Hello
I want show default open one accordion when page is load .How I can do this.
please as soon as possible.
Thank you.