Is there a way to reveal hidden content only after clicking on the "View" link instead of hovering over it?
I have tried implementing it so that the content appears on click, but it doesn't seem to be working as expected.
How can I achieve this using jQuery?
.tresc-ukryta {
display: none;
border:1px solid #000;
background: #fff;
position: absolute;
width: 400px;
min-height: 400px;
top: 0;
z-index: 50;
border-radius: 5px;
border: 1px solid #acacac;
-webkit-box-shadow: 0px 0px 18px -2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 18px -2px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 18px -2px rgba(0, 0, 0, 0.75);
}
.product-item {
position: relative;
border:1px solid #000;
}
.tresc-ukryta-left {
width: 180px;
float: left;
}
.hr-line {
height: 1px;
background: #acacac;
}
.tresc-ukryta-right {
width: 190px;
float: left;
border-left: 1px solid #acacac;
padding-left: 10px;
padding-top: 10px;
}
.product-item:hover .tresc-ukryta {
display: block;
}
.product-item:hover .pokaz-ukryta {
visibility: hidden;
}<div class="product-item">
<a href="#" class="title-3">Wardrobe Segment Model: SUM320<br>Dimensions: 800x400x400</a>
<a href="#" class="product-item-image"><img src="images/product-list-toplayer.jpg"></a>
<div class="price-box">
<span class="price">Price: </span>
<span class="price-2">265 PLN</span>
<span class="price-3">NET</span>
</div>
<div class="clearfix"></div>
<a href="#" class="view">View</a>
<div class="hidden-content hidden-xs">
<div class="hidden-content-left">
<a href="#" class="title-3">Wardrobe Segment Model: SUM320</a>
<a href="#" class="title-4">Dimensions: 800x400x400</a>
<a href="#" class="product-item-image"><img src="images/product-list-toplayer.jpg"></a>
<div class="price-box">
<span class="price">Price: </span>
<span class="price-2">265 PLN</span>
<span class="price-3">NET</span>
</div>
</div>
<div class="hidden-content-right">
<p>Description:<br>
2-segment metal wardrobe painted with powder paint. Body and doors of the wardrobe in light gray color (RAL 7035).
Doors equipped with vents. Each segment has a shelf and a clothes rail with hooks. The wardrobe is locked with a key lock with a latch in one point. .</p>
<a href="#" class="inquire">Inquire about the product</a>
</div>
<div class="clearfix"></div>
<div class="hr-line"></div>
<div class="hidden-content-bottom">
<p>Available colors:</p>
<div class="ral-hidden">
<a href="#"><img src="images/ral.jpg"></a>
<p>RAL 7035</p>
</div>
<div class="ral-hidden">
<a href="#"><img src="images/ral.jpg"></a>
<p>RAL 7035</p>
</div>
<div class="ral-hidden">
<a href="#"><img src="images/ral.jpg"></a>
<p>RAL 7035</p>
</div>
<div class="ral-hidden">
<a href="#"><img src="images/ral.jpg"></a>
<p>RAL 7035</p>
</div>
<div class="ral-hidden">
<a href="#"><img src="images/ral.jpg"></a>
<p>RAL 7035</p>
</div>
<div class="ral-hidden">
<a href="#"><img src="images/ral.jpg"></a>
<p>RAL 7035</p>
</div>
<div class="ral-hidden">
<a href="#"><img src="images/ral.jpg"></a>
<p>RAL 7035</p>
</div>
<div class="ral-hidden">
<a href="#"><img src="images/ral.jpg"></a>
<p>RAL 7035</p>
</div>
<div class="ral-hidden">
<a href="#"><img src="images/ral.jpg"></a>
<p>RAL 7035</p>
</div>
</div>
</div>
</div>