After click - show hidden content

Question

How do I make only after you click on this link "View" appeared this hidden content?

What I have implemented so far is when I hover and I wants it when it will be clicked.

But something is not working.

How can I do it? With 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">Szafa ubraniowa dwusegmentowa </a>
   <a href="#" class="title-4">model: sum320<br>Wymiar: 800x400x400</a>
 <a href="#" class="product-item-image"><img src="images/product-list-toplayer.jpg"></a>
        
  <div class="price-box">
      <span class="price">Cena: </span>
   <span class="price-2">265zł</span>
   <span class="price-3">NETTO</span>
   </div>
        
  <div class="clearfix"></div>
   <a href="#" class="zobacz">Zobacz</a>
   <div class="tresc-ukryta hidden-xs">
   <div class="tresc-ukryta-left">
   <a href="#" class="title-3">Szafa ubraniowa dwusegmentowa </a>
   <a href="#" class="title-4">model: sum320<br>Wymiar: 800x400x400</a>
   <a href="#" class="product-item-image"><img src="images/product-list-toplayer.jpg"></a>
          
   <div class="price-box">
    <span class="price">Cena: </span>
    <span class="price-2">265zł</span>
    <span class="price-3">NETTO</span>
   </div>
  </div>
         
  <div class="tresc-ukryta-right">
         
  <p>Opis:<br>

          2-segmentowa metalowa szafa ubraniowa pokryta farbą proszkową. Korpus i drzwi szafy w kolorze jasnoszarym RAL 7035.
          Drzwi wyposażone w wywietrzniki. W każdym segmencie znajduje się półka oraz drążek z haczykami na ubrania. Szafka zamykana zamkiem kluczowym z ryglem w jednym punkce. .</p>
          
 <a href="#" class="zapytaj">Zapytaj o produkt</a>
         
 </div>
         
 <div class="clearfix"></div>
         
 <div class="hr-line"></div>
         
 <div class="tresc-ukryta-bottom">
         
 <p>Dostępna kolorystyka:</p>
          
 <div class="ral-ukryty">
 <a href="#"><img src="images/ral.jpg"></a>
 <p>RAL 7035</p>
 </div>
          
 <div class="ral-ukryty">
    <a href="#"><img src="images/ral.jpg"></a>
 <p>RAL 7035</p>
 </div>
          
 <div class="ral-ukryty">
 <a href="#"><img src="images/ral.jpg"></a>
  <p>RAL 7035</p>
 </div>
 <div class="ral-ukryty">
  <a href="#"><img src="images/ral.jpg"></a>
  <p>RAL 7035</p>
 </div>
    <div class="ral-ukryty">
  <a href="#"><img src="images/ral.jpg"></a>
  <p>RAL 7035</p>
 </div>
          
 <div class="ral-ukryty">
  <a href="#"><img src="images/ral.jpg"></a>
  <p>RAL 7035</p>
 </div>
          
 <div class="ral-ukryty">
  <a href="#"><img src="images/ral.jpg"></a>
  <p>RAL 7035</p>
 </div>
 <div class="ral-ukryty">
  <a href="#"><img src="images/ral.jpg"></a>
  <p>RAL 7035</p>
 </div>
          
 <div class="ral-ukryty">
  <a href="#"><img src="images/ral.jpg"></a>
  <p>RAL 7035</p>
 </div>
         
    </div>
         
         
  </div>
</div>

Well first, you have to understand how html, css, and javascript work. You'll need to remove the css hover effects and replace this effect with a Javascript `onclick` event. http://stackoverflow.com/questions/4357291/javascript-show-element-on-click — Spencer May, Jun 24 '15 at 17:44

score 0 · Answer 1 · answered Jun 24 '15 at 17:54

0

If you want the div to appear on click and not on hover use jQuery

$(".Zobacz").click(function(){
  $(".tresc-ukryta").css("display", "block");
});

keep in mind to make an option to close the div, meaning making it display:none again.

answered Jun 24 '15 at 17:54

E.S

1
2

After click - show hidden content

1 Answers1