Jump to content

Pricing table + accordion HTML-CSS-JS

Recommended Posts

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

Capture d’écran, le 2024-03-05 à 12.43.04.png

Link to comment
  • Replies 4
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

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?

image.thumb.png.90ac29b3086cc123143778eb8a55c6dd.png

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>

 

Link to comment
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? 🙂

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.