show description when clicked - php

Question

i will need some help with some coding if possible. I would like to have when clicked Learn More to show description above the button and when clicked back to hide it. Any help would be higly appreciated! Code listed below. Thank you for your time!
One more thing, as you can see the top border is not shown, how can i make it to show? Thank you very much for the time spent!
<style>
/* RELATE PRODUCTS BEGIN */
.cardd {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 600px;
margin: auto;
text-align: center;
font-family: arial;
}
.cardd p {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 24px;
font-weight: bold;
margin-top: 6px;
margin-bottom: 5px;
margin-left: 0px;
text-align: left;
padding-top: 6px;
}
.price {
color: grey;
font-size: 22px;
}
.cardd button {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #c41735;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.cardd button:hover {
opacity: 0.7;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
padding: 0;
margin-top: 0px;
margin-bottom: 10px;
}
</style>
<div class="container">
<!-- <div class="row no-margin">
<div class="col-lg-12 text-center">
<h1 class="section-heading">Harnesses</h1>
</div>
</div> -->
<div class="row">
<div class="col-lg-12 scrollReveal sr-bottom sr-ease-in-out-quad sr-delay-1">
<br><br><br>
<h1 class="section-heading page-heading">Engines</h1>
<p></p>
</div>
</div>
<div class="height-60"> </div>
<div class="row">
<div class="col-lg-3 col-md-6 mb-5 col-sm-12">
<div class="scrollReveal sr-bottom sr-ease-in-out-quad sr-delay-1 ">
<div class="cardd">
<img src="g" alt="" style="width:100%">
<h2 class="page-heading">Vittorazi<br> Moster185 Plus MY20</h1>
<span class="price">£1729.99</span>
<p></p>
<p><button>Learn more</button></p>
<p></p>
</div>
</div>
</div> <br>
<div class="col-lg-3 col-md-6 mb-5 col-sm-12">
<div class="scrollReveal sr-bottom sr-ease-in-out-quad sr-delay-1">
<div class="cardd">
<img src="g" alt="" style="width:100%">
<h2 class="page-heading"><br> </h1>
<span class="price">£1729.99</span>
<p></p>
<p><button>Learn more</button></p>
</div>
</div>
</div> <br>
<div class="col-lg-3 col-md-6 mb-5 col-sm-12">
<div class="scrollReveal sr-bottom sr-ease-in-out-quad sr-delay-1">
<div class="cardd">
<img src="" alt="" style="width:100%">
<h2 class="page-heading"><br> </h1>
<span class="price">£1729.99</span>
<p></p>
<p><button>Learn more</button></p>
</div>
</div>
</div> <br>
<div class="col-lg-3 col-md-6 mb-5 col-sm-12">
<div class="scrollReveal sr-bottom sr-ease-in-out-quad sr-delay-1">
<div class="cardd">
<img src="" alt="Atom 80 Vitorazzi" style="width:100%">
<h2 class="page-heading"><br></h1>
<span class="price">£1729.99</span>
<p></p>
<p><button>Learn more</button></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

What you're looking for is a collapsible! All you need is a little JavaScript, and you can expand/collapse text using a button.
Expand Above
If you want to make the hidden text appear above the button, try this:
var collapse = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < collapse.length; i++) {
collapse[i].addEventListener("click", function() {
this.classList.toggle("active");
var expand = this.previousElementSibling;
if (expand.style.display === "block") {
expand.style.display = "none";
} else {
expand.style.display = "block";
}
});
}
.collapsible {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #c41735;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.expand {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #eee;
}
<div class="expand">
<p>
Hidden text.
</p>
</div>
<button type="button" class="collapsible">Learn more</button>
Expand Below
If you want to make it appear below the button, however, just flip the order in which the <div> and <button> element appear, and switch out previousElementSibling with nextElementSibling:
var collapse = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < collapse.length; i++) {
collapse[i].addEventListener("click", function() {
this.classList.toggle("active");
var expand = this.nextElementSibling;
if (expand.style.display === "block") {
expand.style.display = "none";
} else {
expand.style.display = "block";
}
});
}
.collapsible {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #c41735;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.expand {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #eee;
}
<button type="button" class="collapsible">Learn more</button>
<div class="expand">
<p>
Hidden text.
</p>
</div>

Answer 2

To make the text hide and appear above the Button you must make use of toggle() event as
$("document").ready(function(){
$(".collapsible").toggle(
function(){
$(".expand").css({"display" : "block"});},
function(){
$(".expand").css({"display" : "none"});});
});
.collapsible {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #c41735;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.expand {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<div class="expand">
<p>
Hidden text.
</p>
</div>
<button type="button" class="collapsible">Learn more</button>
Note: Add the Jquery CDN to use the jquery code.
(<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">
</script>)