• Announcements

    • boen_robot

      Guidelines and Netiquette   03/28/2017

      Posting Problems:   Having problems posting your topic? Read through this: To join, you agree to our terms and conditions and fill out and submit a registration form. An activation email will be sent to your email adress, so you'll need to verify your account. After that the account has to be validated by one of the moderators. This will mean that it can take up to a day to be activated. A couple of things to remember to ensure approval: Don't use an email address in one of those $2 four character .com domains eg. xyds.com. These will be deleted and the domain added to the banned list. Don't use an email address that is within a domain with a bad reputation for spam. A Google search is run on every email address and email domain. Don't sign up with an email address that doesn't exist, doesn't work or requires the sender to answer a quiz before their email can get to you. Put your country and or state and city in the signup form. Blank forms will go to the botton of the "to do" list. And make sure that your email address and your country match, saying you're from Alabama and using a .ru email address is not going to get you activated. After a membership is activated the first few posts will be monitored. Posting spam or unapproved topics described in the agreement results in an immediate ban. The email provider and the IP addresses associated with the account will be banned and all posts will be deleted. These strict measures have been deemed necessary to hinder spam. Sorry for any inconvenience this causes, but it's not liable to change. If, after reading this, you still can't post and don't understand why, contact one of the Moderators listed here.   Topic Guidelines   Including the following information can expedite an accurate response from board members: Must be a Specific Problem or Question related to web design and development Include Code in Question (wrap with   for small blocks of code and for longer blocks   ) Include Code Author Include Extra Notes/Modifications/Attempts Include web link to page/file when possible Content Guidelines   You may not post, upload, link to, or email any Content that contains, promotes, gives instruction about, or provides prohibited Content. Prohibited Content includes any Content that breaks any local, state, county, national or international law. Prohibited Content also includes: No direct or indirect advertising or websites, forums, products, services No hijacking of posts (do not post your question in someone elses) Content that infringes upon any rights [ex. MP3s and ROMs] (including, but not limited to, copyrights and trademarks) Abusive, threatening, defamatory, racist, or obscene Viruses or any other harmful computer software False Information or libel Spam, chain letters, or Pyramid schemes Gambling or Illicit drugs Terrorism Hacking or cheating for internet/online games Warez, Roms, CD-Keys, Cracks, Passwords, or Serial Numbers Pornography, nudity, or sexual material of any kind Excessive profanity Invasive of privacy or impersonation of any person/entity Hacking materials or information Posting Tips   There are more BBcodes than there are buttons for on the reply menu. To get the full list, click "BB Code Help" underneath the clickable smilie face menu. Use   for small snippets of code Use   for lengthy snippets of code Use   if your snippet is HTML (optional) Use   if your snippet is SQL (optional) Rules of Conduct   Be nice. There's no need for calling someone stupid if they ask an 'easy' question. Keep your avatars and signatures absolutely child friendly. We have a younger audience on this forum. Keep your language appropriate for the same reason above. Do not PM moderators for help on the forum. Post on the topic, or create a new one.   Spam:   Recently, as you have all without doubt noticed, we have had lots of spam and advertisement on the forum. Therefore, we'd like to alert you as to what to do when you have found any of the aforementioned annoying messages: it. Immediately. Give a clear reason, please, if the advertising is not evident. DO NOT POST! Report, let the post stay as is, and we will get to it, meanwhile if you continue to post as normal in the other threads, it won't be on the top so long. Refrain from PMing the member. This won't help at all, as they are most likely spambots anyway. Thank you.       Images in signatures:   After thinking of users on dial-up, we have decided to enforce the following rules regarding signatures. Please pay heed to them. Respecting these rules is respecting the members on this forum with dial-up. Signature rules: No animated images AT ALL. No matter the amount of animation. Maximum image widthxheight: 300x150 Maximum image (file) size: 15kb Use calm colors. Do not use highly contrasting images in your signature, as this can get really annoying when seeing several posts from one member in the same thread. The same prohibited content goes for images as for posts. Lastly, use common sense. No lengthy signatures please. Save us some scrolling. Thank you.       Links in signatures:   Please understand that w3schools.com only exists because of voluntary work and is barely supported by the advertising littered throughout the tutorials and the forum. So, please, stop advertising other sites. DO not post links that drive traffic away from the w3schools domain - especially to a site that offers similar if not identical information. Please help support the site by keeping individuals on it. Thank you. Here are some guidelines as to what you can put in your signature: w3schools links --> allowed w3.org links --> allowed browser links --> allowed html editor links --> allowed personal sites --> allowed tutorial sites competing with w3schools --> NOT allowed sites completely irrelevant to webprogramming and this forum --> NOT allowed   Thanks for understanding, and for taking the time to read this. ~W3Schools Modstaff~
tonygildon86

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

4 posts in this topic

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>

Share this post


Link to post
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'.

Share this post


Link to post
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';
}

Share this post


Link to post
Share on other sites

Posted (edited)


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

Share this post


Link to post
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