Pricing table + accordion HTML-CSS-JS

abbiericher · March 5

Hi group,

I got a client who wanted a pricing table for her different packages. Found an HTML code online and customized it with CSS. The client love the concept (big win).

But, she wanted to add a description with an accordion. I found another HTML code which I implanted in the pricing table code. The accordion works, but here are my two concerns:

1- I dont want the white background behind the description when it is clicked on. Would love it if it could stayed the same color than when we are hovering the table. How do I change that?

2- Why is my entire table closing when when we click on the accordion title to close the description? I would love to close only the description. Is it possible?

3- Is it possible to change the title when clicked to say "Fermer la description" ? (sorry, the site is in french)

Site: https://alau-site-web.squarespace.com/ (you will have to click on "Forfait et prix" to find the pricing table)

Password: freelance

tuanphan · March 7

#1. Use this code to Website Tools > Custom CSS

div.active .panel {
    background-color: Transparent !important;
}

#2. Which code did you use to create accordion?

#3. These titles?

abbiericher · March 8

On 3/7/2024 at 2:46 AM, tuanphan said:
#1. Use this code to Website Tools > Custom CSS
div.active .panel {
    background-color: Transparent !important;
}
#2. Which code did you use to create accordion?

#3. These titles?

The first code works! Thanks @tuanphan.

#2: I used the code below in a code block element

#3: No the button accordion title


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prix</title>
<link rel="stylesheet" href="styles.css">
<style>
  
.price-table {
  float: left;
  width: 29.1%;
  background: #fcfeff!important;
  border-radius: 30px;
  margin: 5px;
  padding: 20px;
}

@media only screen and (max-width: 600px) {
  .price-table {
    width: 87%;
    margin-bottom: 30px;
  }
}

.price-table:hover {
  background: var(--light-green)!important;
  border: 1px solid var(--blue);
}

.price-header {
  text-align: center;
}

.price-header h3 {
  margin: 0;
  font-size: 24px;
  color: var(--blue);
}

@media only screen and (max-width: 600px) {
  .price-header h3 {
    padding-top: 15px;
  }
}

.price-header h4 {
  margin: 5px 0;
  font-size: 18px;
  color: var(--dark);
}

.price-content {
  padding-top: 15px;
}

.course {
  padding: 15px 0px;
  display: grid;
  justify-content: center;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  text-align: center;
}

.division {
  border: 1px solid var(--light-green);
  width: 100%;
}

.price-content {
  margin: 0;
}

@media only screen and (max-width: 600px) {
  .price-content {
    margin-left: 10px;
  }
}

.price-content .price {
  font-weight: bold;
  font-size: 2rem;
  padding-top: 15px;
}

.price-content button {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-left: 50px;
}

.price-content button:hover {
  background-color: var (--white);
}  

.accordion {
  background-color: var(--white);
  color: var(--dark);
  cursor: pointer;
  padding: 8px 10px;
  padding-top: 15px;
  width: 91%;
  text-align: center;
  font-size: 15px;
  border: none;
  outline: none;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: none;
} 

.panel {
  padding: 0 15px;
  background-color: white;
  display: none;
  overflow: hidden;
}
 
</style>
</head>
<body>

<div class="price-table">
  <div class="price-header">
    <h3>L'express</h3>
    <h4>1 cours</h4>
  </div>
  <div class="accordion">
    <button class="accordion">Cliquez pour voir la description</button>
    <div class="panel">
      <p>Cours de natation privés visant à évaluer les capacités du nageur, en identifiant ses points forts et faibles. Le forfait inclut également des exercices ciblés pour renforcer ses compétences.</p>
    </div>
  </div>
  <div class="price-content">
    <div class="course">
      <ul>
      <li class="price">55 $</li>
      <li class="time">30 min</li>
      </ul>
    </div>
  </div>
</div>

<div class="price-table">
  <div class="price-header">
    <h3>L'apprenti</h3>
    <h4>4 cours</h4>
  </div>
  <div class="accordion">
    <button class="accordion">Cliquez pour voir la description</button>
    <div class="panel">
      <p>Ce cours de natation à domicile offre au participant l'opportunité de progresser sur différents aspects techniques, en lui enseignant les fondamentaux nécessaires pour entreprendre sa propre progression vers l'autonomie aquatique.</p>
    </div>
  </div>
  <div class="price-content">
    <div class="course">
      <ul>
      <li class="price">200 $</li>
      <li class="time">30 min</li>
      </ul>
    </div>
    <span class="division"></span>
    <div class="course">
      <ul>
      <li class="price">375 $</li>
      <li class="time">60 min</li>
      </ul>
    </div>
    <span class="division"></span>
    <div class="course">
      <ul>
      <li class="price">525 $</li>
      <li class="time">90 min</li>
      </ul>
    </div>
    <span class="division"></span>
    <div class="course">
      <ul>
      <li class="price">625 $</li>
      <li class="time">120 min</li>
      </ul>
    </div>
  </div>
</div>

<div class="price-table">
  <div class="price-header">
    <h3>L'autonome</h3>
    <h4>8 cours</h4>
  </div>
  <div class="accordion">
    <button class="accordion">Cliquez pour voir la description</button>
    <div class="panel">
      <p>Nos professeurs de natation à domicile se concentreront sur les besoins spécifiques de chaque jeune nageur, en travaillant en profondeur sur les aspects à améliorer. Ce programme permet au participant de gagner en autonomie dans l'eau.</p>
    </div>
  </div>
  <div class="price-content">
    <div class="course">
      <ul>
      <li class="price">400 $</li>
      <li class="time">30 min</li>
      </ul>
    </div>
    <span class="division"></span>
    <div class="course">
      <ul>
      <li class="price">720 $</li>
      <li class="time">60 min</li>
      </ul>
    </div>
    <span class="division"></span>
    <div class="course">
      <ul>
      <li class="price">990 $</li>
      <li class="time">90 min</li>
      </ul>
    </div>
    <span class="division"></span>
    <div class="course">
      <ul>
      <li class="price">1215 $</li>
      <li class="time">120 min</li>
      </ul>
    </div>
  </div>
</div>

<script>
  var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* Toggle between adding and removing the "active" class,
    to highlight the button that controls the panel */
    this.classList.toggle("active");

    /* Toggle between hiding and showing the active panel */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>

</body>
</html>

abbiericher · March 12

On 3/8/2024 at 2:08 PM, abbiericher said:

The first code works! Thanks @tuanphan.

#2: I used the code below in a code block element

#3: No the button accordion title


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prix</title>
<link rel="stylesheet" href="styles.css">
<style>
  
.price-table {
  float: left;
  width: 29.1%;
  background: #fcfeff!important;
  border-radius: 30px;
  margin: 5px;
  padding: 20px;
}

@media only screen and (max-width: 600px) {
  .price-table {
    width: 87%;
    margin-bottom: 30px;
  }
}

.price-table:hover {
  background: var(--light-green)!important;
  border: 1px solid var(--blue);
}

.price-header {
  text-align: center;
}

.price-header h3 {
  margin: 0;
  font-size: 24px;
  color: var(--blue);
}

@media only screen and (max-width: 600px) {
  .price-header h3 {
    padding-top: 15px;
  }
}

.price-header h4 {
  margin: 5px 0;
  font-size: 18px;
  color: var(--dark);
}

.price-content {
  padding-top: 15px;
}

.course {
  padding: 15px 0px;
  display: grid;
  justify-content: center;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  text-align: center;
}

.division {
  border: 1px solid var(--light-green);
  width: 100%;
}

.price-content {
  margin: 0;
}

@media only screen and (max-width: 600px) {
  .price-content {
    margin-left: 10px;
  }
}

.price-content .price {
  font-weight: bold;
  font-size: 2rem;
  padding-top: 15px;
}

.price-content button {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-left: 50px;
}

.price-content button:hover {
  background-color: var (--white);
}  

.accordion {
  background-color: var(--white);
  color: var(--dark);
  cursor: pointer;
  padding: 8px 10px;
  padding-top: 15px;
  width: 91%;
  text-align: center;
  font-size: 15px;
  border: none;
  outline: none;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: none;
} 

.panel {
  padding: 0 15px;
  background-color: white;
  display: none;
  overflow: hidden;
}
 
</style>
</head>
<body>

<div class="price-table">
  <div class="price-header">
    <h3>L'express</h3>
    <h4>1 cours</h4>
  </div>
  <div class="accordion">
    <button class="accordion">Cliquez pour voir la description</button>
    <div class="panel">
      <p>Cours de natation privés visant à évaluer les capacités du nageur, en identifiant ses points forts et faibles. Le forfait inclut également des exercices ciblés pour renforcer ses compétences.</p>
    </div>
  </div>
  <div class="price-content">
    <div class="course">
      <ul>
      <li class="price">55 $</li>
      <li class="time">30 min</li>
      </ul>
    </div>
  </div>
</div>

<div class="price-table">
  <div class="price-header">
    <h3>L'apprenti</h3>
    <h4>4 cours</h4>
  </div>
  <div class="accordion">
    <button class="accordion">Cliquez pour voir la description</button>
    <div class="panel">
      <p>Ce cours de natation à domicile offre au participant l'opportunité de progresser sur différents aspects techniques, en lui enseignant les fondamentaux nécessaires pour entreprendre sa propre progression vers l'autonomie aquatique.</p>
    </div>
  </div>
  <div class="price-content">
    <div class="course">
      <ul>
      <li class="price">200 $</li>
      <li class="time">30 min</li>
      </ul>
    </div>
    <span class="division"></span>
    <div class="course">
      <ul>
      <li class="price">375 $</li>
      <li class="time">60 min</li>
      </ul>
    </div>
    <span class="division"></span>
    <div class="course">
      <ul>
      <li class="price">525 $</li>
      <li class="time">90 min</li>
      </ul>
    </div>
    <span class="division"></span>
    <div class="course">
      <ul>
      <li class="price">625 $</li>
      <li class="time">120 min</li>
      </ul>
    </div>
  </div>
</div>

<div class="price-table">
  <div class="price-header">
    <h3>L'autonome</h3>
    <h4>8 cours</h4>
  </div>
  <div class="accordion">
    <button class="accordion">Cliquez pour voir la description</button>
    <div class="panel">
      <p>Nos professeurs de natation à domicile se concentreront sur les besoins spécifiques de chaque jeune nageur, en travaillant en profondeur sur les aspects à améliorer. Ce programme permet au participant de gagner en autonomie dans l'eau.</p>
    </div>
  </div>
  <div class="price-content">
    <div class="course">
      <ul>
      <li class="price">400 $</li>
      <li class="time">30 min</li>
      </ul>
    </div>
    <span class="division"></span>
    <div class="course">
      <ul>
      <li class="price">720 $</li>
      <li class="time">60 min</li>
      </ul>
    </div>
    <span class="division"></span>
    <div class="course">
      <ul>
      <li class="price">990 $</li>
      <li class="time">90 min</li>
      </ul>
    </div>
    <span class="division"></span>
    <div class="course">
      <ul>
      <li class="price">1215 $</li>
      <li class="time">120 min</li>
      </ul>
    </div>
  </div>
</div>

<script>
  var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* Toggle between adding and removing the "active" class,
    to highlight the button that controls the panel */
    this.classList.toggle("active");

    /* Toggle between hiding and showing the active panel */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>

</body>
</html>

@tuanphan any help oh the 2 last questions? 🙂

tuanphan · March 15

These titles?

Pricing table + accordion HTML-CSS-JS

Recommended Posts

abbiericher

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

tuanphan

abbiericher

abbiericher

tuanphan

Create an account or sign in to comment

News

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources