How to make my pricing table appear when clicking a button?

Question

I'm building a website and I want to make a fancy animation for my pricing tables where they appear when you click their name. You can see the website here .

I've already tried this code from W3 Schools on how to make an accordion and wrapping the "panel" class around my pricing table but it didn't worked out for me, do you have any suggestions ? Below is the code of my pricing table and it's styling. For your information on the wbesite all the pricing boxes uses the same code.

 .first-titre-table { color: black; font-size: 40px; font-family: 'Open Sans'; } .titre-table { margin-top: 50%; color: black; width: auto; height: auto; font-size: 40px; font-family: 'Open Sans'; } @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700); .snip1404 { font-family: 'Open Sans'; color: #ffffff; text-align: left; font-size: 16px; max-width: 1000px; left: 20%; margin-right: auto; width: 100%; padding: 10px; margin-top: 7%; display: block; flex-wrap: wrap; align-content: center; position: relative; } .snip1404 img { position: absolute; left: 0; top: 0; height: 100%; z-index: -1; } .snip1404 .plan { margin: 6px; margin-top: 7px; width: 25%; position: relative; float: left; overflow: hidden; border: 5px solid #730000; box-shadow: 0px 0px 10px #000; background-color: #b30000; } .snip1404 .plan:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } .snip1404 * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .snip1404 header { background-color: #b30000; color: #ffffff; } .snip1404 .plan-title { background-color: rgba(0, 0, 0, 0.5); position: relative; margin: 0; padding: 20px 20px 0; text-transform: uppercase; letter-spacing: 4px; } .snip1404 .plan-title::after { position: absolute; content: ''; top: 100%; left: 0; width: 0; height: 0; border-style: solid; border-width: 40px 300px 0 0; border-color: rgba(0, 0, 0, 0.5) transparent transparent; } .snip1404 .plan-cost { padding: 40px 20px 10px; text-align: right; } .snip1404 .plan-price { font-weight: 600; font-size: 3em; } .snip1404 .plan-type { opacity: 0.8; font-size: 0.9em; text-transform: uppercase; } .snip1404 .plan-features { padding: 0 0 20px; margin-left: 10px; list-style: outside none none; text-align: center; } .snip1404 .plan-features li { padding: 8px 5%; } .snip1404 .plan-features i { margin-right: 8px; color: rgba(0, 0, 0, 0.5); } .snip1404 .plan-select { border-top: 1px solid rgba(0, 0, 0, 0.2); padding: 20px; text-align: center; } .snip1404 .plan-select a { background-color: #700000; color: #ffffff; text-decoration: none; padding: 12px 20px; font-size: 0.75em; font-weight: 600; border-radius: 20px; text-transform: uppercase; letter-spacing: 4px; display: inline-block; } .snip1404 .plan-select a:hover { background-color: #ff4d4d; } .text-garantie { font-size: 17px; display: inline; color: #fff; font-weight: bold; text-shadow: 0px 0px 7px #ddd; } @media only screen and (max-width: 767px) { .snip1404 .plan { width: 50%; } .snip1404 .plan-title, .snip1404 .plan-select a { -webkit-transform: translateY(0); transform: translateY(0); } .snip1404 .plan-select, .snip1404 .plan-featured .plan-select { padding: 20px; } .snip1404 .plan-featured { margin-top: 0; } } @media only screen and (max-width: 440px) { .snip1404 .plan { width: 100%; } .snip1404 .plan-non-featured { width: 100%; } .snip1404 .plan-featured { width: 100%; } }

 <div class="snip1404"> <h2 class="first-titre-table"> Contrats Chaudière Gaz </h2> <div class="plan"> <header> <h4 class="plan-title"> Contrat 1 an </h4> <div class="plan-cost"> <span class="plan-price"> 188€ </span> <span class="plan-type"> /an </span> </div> </header> <ul class="plan-features"> <li> 1 intervention/an </li> <li style="margin-bottom:63%;"> </li> </ul> <div class="plan-select"> <a href=""> Choisir </a> </div> </div> </div>

I would like to keep this site as framework free as possible because I don't know how it's gonna behave when I will try to host it on my company's servers so please consider this before answering, thanks !

Answer 1

$('.first-titre-table').click(function(){
  $(this).next('.plan').slideToggle()
})

If I've understood you, this jQuery will do what you want. Of course, you need to hide it first.

.plan{
  display: none;
}

Answer 2

I tried this code from W3 Schools. Is this what you want?

Your website have js error and stop so other js can't execute. You need to fixed it by yourself.

 var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight){ panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); }

 .first-titre-table { color: black; font-size: 40px; font-family: 'Open Sans'; } .titre-table { margin-top: 50%; color: black; width: auto; height: auto; font-size: 40px; font-family: 'Open Sans'; } @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700); .snip1404 { font-family: 'Open Sans'; color: #ffffff; text-align: left; font-size: 16px; max-width: 1000px; left: 20%; margin-right: auto; width: 100%; padding: 10px; margin-top: 7%; display: block; flex-wrap: wrap; align-content: center; position: relative; } .snip1404 img { position: absolute; left: 0; top: 0; height: 100%; z-index: -1; } .snip1404 .plan { margin: 6px; margin-top: 7px; width: 25%; position: relative; float: left; overflow: hidden; border: 5px solid #730000; box-shadow: 0px 0px 10px #000; background-color: #b30000; } .snip1404 .plan:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } .snip1404 * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .snip1404 header { background-color: #b30000; color: #ffffff; } .snip1404 .plan-title { background-color: rgba(0, 0, 0, 0.5); position: relative; margin: 0; padding: 20px 20px 0; text-transform: uppercase; letter-spacing: 4px; } .snip1404 .plan-title::after { position: absolute; content: ''; top: 100%; left: 0; width: 0; height: 0; border-style: solid; border-width: 40px 300px 0 0; border-color: rgba(0, 0, 0, 0.5) transparent transparent; } .snip1404 .plan-cost { padding: 40px 20px 10px; text-align: right; } .snip1404 .plan-price { font-weight: 600; font-size: 3em; } .snip1404 .plan-type { opacity: 0.8; font-size: 0.9em; text-transform: uppercase; } .snip1404 .plan-features { padding: 0 0 20px; margin-left: 10px; list-style: outside none none; text-align: center; } .snip1404 .plan-features li { padding: 8px 5%; } .snip1404 .plan-features i { margin-right: 8px; color: rgba(0, 0, 0, 0.5); } .snip1404 .plan-select { border-top: 1px solid rgba(0, 0, 0, 0.2); padding: 20px; text-align: center; } .snip1404 .plan-select a { background-color: #700000; color: #ffffff; text-decoration: none; padding: 12px 20px; font-size: 0.75em; font-weight: 600; border-radius: 20px; text-transform: uppercase; letter-spacing: 4px; display: inline-block; } .snip1404 .plan-select a:hover { background-color: #ff4d4d; } .text-garantie { font-size: 17px; display: inline; color: #fff; font-weight: bold; text-shadow: 0px 0px 7px #ddd; } @media only screen and (max-width: 767px) { .snip1404 .plan { width: 50%; } .snip1404 .plan-title, .snip1404 .plan-select a { -webkit-transform: translateY(0); transform: translateY(0); } .snip1404 .plan-select, .snip1404 .plan-featured .plan-select { padding: 20px; } .snip1404 .plan-featured { margin-top: 0; } } @media only screen and (max-width: 440px) { .snip1404 .plan { width: 100%; } .snip1404 .plan-non-featured { width: 100%; } .snip1404 .plan-featured { width: 100%; } } /* Style the buttons that are used to open and close the accordion panel */ .accordion { transition: 0.4s; } /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */ .active, .accordion:hover { background-color: #ccc; } /* Style the accordion panel. Note: hidden by default */ .panel { max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }

 <div class="snip1404"> <h2 class="first-titre-table accordion"> Contrats Chaudière Gaz </h2> <div class="plan panel"> <header> <h4 class="plan-title"> Contrat 1 an </h4> <div class="plan-cost"> <span class="plan-price"> 188€ </span> <span class="plan-type"> /an </span> </div> </header> <ul class="plan-features"> <li> 1 intervention/an </li> <li style="margin-bottom:63%;"> </li> </ul> <div class="plan-select"> <a href=""> Choisir </a> </div> </div> </div>