Jump to content

Accordion - Open and Close when Panel is Selected (w3schools Accordion)


tonygildon86

Recommended Posts

I am looking for assistance with my accordion code shown below. It functions perfect, but I am trying to get it so that when a panel is clicked and opened, if it is clicked again it will also close. I also want it to still close if another panel is clicked and opened, which is already working great thanks to you.



<style>

button.accordion {

background-color: #262624;

color: #f98100;

cursor: pointer;

padding: 18px;

width: 100%;

border: none;

text-align: left;

outline: none;

font-size: 18px;

transition: 0.4s;

font-family: Playfair Display;

}

button.accordion.active, button.accordion:hover {

background-color: #ffffff;

}

button.accordion:after {

content: '\002B';

color: #f98100;

font-weight: bold;

float: right;

margin-left: 5px;

}

button.accordion.active:after {

content: "\2212";

}

div.panel {

padding: 0 18px;

background-color: #f98100;

max-height: 0;

overflow: hidden;

transition: max-height 0.2s ease-out;

font-family: Playfair Display;

}

</style>

<button class="accordion">

1. What is paint protection film?

</button>

<div class="panel">

<p>

Clear-Bra paint protection film is used to protect the integrity and beauty of your vehicle's paint finish. The 8mil (.008") clear urethane film adheres to the vulnerable painted areas of your vehicle (ie. hood, fenders, side mirrors, grille, front bumper, etc.). Saturday's primarily uses Xpel Ultimate and the new Suntek Ultra film which also comes with a 10 year warranty!

</p>

</div>

<button class="accordion">

2. Does it really stop rocks from chipping my paint?

</button>

<div class="panel">

<p>

Absolutely! This product is used in many applications and was originally used to keep rocks and debris from damaging propellers on helicopters & the wings and noses of airplanes. It has been tested by engineers as well as Saturdays staff through years of experience. Of course if you hit a boulder you may be in trouble.

</p>

</div>

<button class="accordion">

3. What areas of my car will be covered?

</button>

<div class="panel">

<p>

We can cover anything you'd like! From headlights, door edges, full hood or we can wrap and protect your entire car! Some vehicles have more impact areas than others. Generally we have a kit that will suit anyone's needs. From the basics all the way to full coverage. Saturdays has you covered!

</p>

</div>

<button class="accordion">

4. Is clearbra paint protection really invisible?

</button>

<div class="panel">

<p>

It is very difficult to see the paint protection unless you are looking at it at the right angle under 3 feet away. Our patterns are computer cut and designed to contour to your vehicle's body lines. This will limit the amount of visible lines. Also, with full panel coverage package’s we wrap all applicable edges to reduce visible lines as much as possible.

</p>

</div>

<button class="accordion">

5. How long will my clearbra last?

</button>

<div class="panel">

<p>

Our products are warrantied from 5 years to 10 years! Depending on how you treat vehicles can also play a role in how long the film will last. If you never wash your car, expect these products to not have as much shine in 5 years as a well taken care of car. We recommend washing your vehicle frequently and using liquid polymer wax on your entire vehicle at least 4 times a year.

</p>

</div>

<button class="accordion">

6. Do we wrap the edges?

</button>

<div class="panel">

<p>

Of course we do! We are here to provide you with superior quality paint protection installation. A lesser shop won't do this just to save time. We wrap all leading edges where applicable. This gives you that extra protection that sets us apart. Only the best here!

</p>

</div>

<button class="accordion">

7. Do we polish and/or clay bar before installation?

</button>

<div class="panel">

<p>

You betcha. We always want the paint perfect as possible before applying the paint protection. This process takes a little longer but it's definitely worth it. With no surface contaminates, your clear-bra paint protection will come out virtually perfect and "glass worthy".

</p>

</div>

<button class="accordion">

8. How long does installation take?

</button>

<div class="panel">

<p>

Installation times will depend upon the complexity of the vehicle and the coverage you choose. This can take anywhere from 2 hours for the simplest kit to 72 hours for more complex or custom installations. We will be able to give you an accurate estimate when we know what coverage you decide on..

</p>

</div>

<button class="accordion">

9. Do I need to do anything special to maintain my clear bra?

</button>

<div class="panel">

<p>

There is nothing special to maintaining a clear bra. Wash and wax your vehicle as you always have, but stay away from paste waxes. These can leave a residue along the edges of the film and some colored paste waxes can actually dye the film over time. Stick with a liquid polymer wax when possible.

</p>

</div>

<button class="accordion">

10. Do you use a plotter to cut patterns?

</button>

<div class="panel">

<p>

In the recent years plotters have become the new way to create patterns for cars. We offer both industry leading Xpel “computer cut” patterns as well as "hand cut" patterns for those custom jobs that other shops just can't handle. Whatever your needs are, we've got you covered.

</p>

</div>

<script>

var acc = document.getElementsByClassName("accordion");

for (var i = 0; i < acc.length; i++) {

acc.addEventListener("click", accordion);

}

function accordion() {

// Reset all of the elements

for(var i = 0; i < acc.length; i++) {

acc.classList.remove("active");

acc.nextElementSibling.style.maxHeight = null;

}


// Toggle the "active" class for the current item

this.classList.add("active");


// Make the contents visible

var panel = this.nextElementSibling;

panel.style.maxHeight = panel.scrollHeight + 'px';

}

</script>

Link to comment
Share on other sites

You need the for loop to remove active class on all but the current one clicked, then check if current one clicked STILL has active class, if yes, remove class and hide next sibling, else add class and make next sibling viewable.

 

Use indexOf() to identify if classList includes 'active'.

Link to comment
Share on other sites

Hello donesuk,

 

I really appreciate your response. I have been at this all day trying to adjust this code to work for me. Would you be able to make your suggested changes to the script below? I am still very new at this, but I have been learning a ton from this forum and w3schools.

 

// For each button, assign an event handler
var acc = document.getElementsByClassName("accordion");
for (var i = 0; i < acc.length; i++) {
acc.addEventListener("click", accordion);
}
// Event handler function
function accordion() {
// Reset all of the elements
for(var i = 0; i < acc.length; i++) {
acc.classList.remove("active");
acc.nextElementSibling.style.maxHeight = null;
}
// Toggle the "active" class for the current item
this.classList.add("active");
// Make the contents visible
var panel = this.nextElementSibling;
panel.style.maxHeight = panel.scrollHeight + 'px';
}
Link to comment
Share on other sites


var acc = document.getElementsByClassName("accordion");

for (var i = 0; i < acc.length; i++) {

acc.addEventListener("click", accordion);

}

function accordion() {

 

for (var i = 0; i < acc.length; i++) {

// Reset all of the elements but current selected

 

if (acc.item(i) !== this)

{

acc.classList.remove("active");

acc.nextElementSibling.style.maxHeight = null;

}

}

 

//check if current selected has 'active' class and remove it and next sibling, else add and show next sibling

if (this.className.indexOf('active') !== -1)

{

this.classList.remove("active");

this.nextElementSibling.style.maxHeight = null;

}

else

{

// being a new selection and not a currently active selection add active class

// Toggle the "active" class for the current item

this.classList.add("active");

 

// Make the contents visible

var panel = this.nextElementSibling;

panel.style.maxHeight = panel.scrollHeight + 'px';

}

}

 

Edited by dsonesuk
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...