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!

```html
 <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>
```