Is there a way to hide certain cards by default and only show them when the user clicks on a "View more" button? I have multiple cards, but I want to hide the last one initially and reveal it when the button is clicked.
I would really appreciate any assistance with this. Thank you!
Best regards, Bill
$(".card-border").on("click", function() {
// Toggle the div background color
$(this).toggleClass("card-bg");
// Find the button
var btn = $(this).find(".btn");
// Toggle classes for ONE button
btn.toggleClass('btn-add-item btn-rmv-item');
// Depending on a button's class, change its text
(btn.hasClass("btn-rmv-item")) ? btn.text("Remove"): btn.text("Add this extra");
});.card-border {
border: 1px solid #c7c7c7;
border-radius: .25rem;
padding: 15px 18px 10px 18px;
margin-bottom: 30px;
cursor: pointer;
}
.card-bg {
background-color: rgba(89, 211, 137, .08);
border: 1px solid #59d389;
}
.upsell-pricing {
float: right;
font-size: 18px;
font-weight: 600;
}
.upsell-text {
font-size: 15px;
margin-top: 10px;
color: #333333;
}
div.ho-border:hover {
border: 1px solid #59d389;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Fuel Replacement -->
<div class="card-border ho-border">
<h4 class="float-left">Fuel replacement</h4>
<div class="upsell-pricing">£49/trip</div>
<div class="clearfix"></div>
<div class="upsell-text">Save time and return the vehicle at any fuel level. The price include upto a full tank of petrol/gas.</div>
<div class="mt-3 float-right">
<button type="button" class="btn btn-add-item">Add this extra</button>
</div>
<div class="clearfix"></div>
</div>
<!-- Portable WiFi Hotspot -->
<div class="card-border ho-border">
<h4 class="float-left">Portable WiFi hotspot</h4>
<div class="upsell-pricing">£10/day</div>
<div class="clearfix"></div>
<div class="upsell-text">Get the luxury of portable WiFi hotspot on the go. The price include unlimited data usage for the day.</div>
<div class="mt-3 float-right">
<button type="button" class="btn btn-add-item">Add this extra</button>
</div>
<div class="clearfix"></div>
</div>
<!-- Post-trip Cleaning -->
<div class="card-border ho-border">
<h4 class="float-left">Post-trip cleaning</h4>
<div class="upsell-pricing">£30/trip</div>
<div class="clearfix"></div>
<div class="upsell-text">Return the vehicle without bothering about post-trip cleaning. This extra does not cover damages to the vehicle seat, stains, spills, and smoke burns.</div>
<div class="mt-3 float-right">
<button type="button" class="btn btn-add-item">Add this extra</button>
</div>
<div class="clearfix"></div>
</div>