V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
Používáš jQuery nebo ne?
S jQuery takto
$(this).closest(".product").find(".product-detail").show();"closest" najde odpovídajícího předka a "find" zase odpovídajícího potomka
Dost elegantní a pure CSS řešení je udělat logiku přes
checkbox, label a nějaký div s obsahem. 
to iste riesenie som skusal, ale praveze nefungovalo
Ako prvé by si mal najskôr odstrániť z kódu inline javascript, tak sa to už dnes nerobí. Prepíš to napríklad takto:
<div class="product">
<div class="product-head">
<h2>Call of Duty 4</h2>
</div>
<div class="product-image">
<a href="#" class="toggleDetails">
<div class="overlay"></div>
<img src="obrazky/hry/CODBO_medium.png">
</a>
</div>
<div class="product-detail">
<table>
<tr>
<td>Rozsah slotov</td>
<td>8-64</td>
</tr>
<tr>
<td>Cena / slot</td>
<td>0.50e</td>
</tr>
<tr>
<td>Verzia</td>
<td>Aktuálna</td>
</tr>
</table>
</div>
</div>
<div class="product">
<div class="product-head">
<h2>Left 4 Dead 2</h2>
</div>
<div class="product-image">
<a href="#" class="toggleDetails>
<div class="overlay"></div>
<img src="obrazky/hry/L4D2_medium.png">
</a>
</div>
<div class="product-detail">
<table>
<tr>
<td>Rozsah slotov</td>
<td>8-64</td>
</tr>
<tr>
<td>Cena / slot</td>
<td>0.50e</td>
</tr>
<tr>
<td>Verzia</td>
<td>Aktuálna</td>
</tr>
</table>
</div>
</div>A následne potrebuješ javascript, ktorý by skrýval / odkrýval detaily. Napríklad takýto:
$('.toggleDetails').click(function (evt) {
evt.preventDefault
$(this).parent().next().slideToggle()
})Pozor. Tento javascript využíva knižnicu jQuery. Takže najskôr si musíš do kódu pripnúť jQuery, a až za ním použiť tento skript. Ak by si nevedel ako na to, napíš sem znovu.
Hopla, preventDefault je metóda a zabudol som dať za ňu zátvorky. Oprava:
$('.toggleDetails').click(function (evt) {
evt.preventDefault()
$(this).parent().next().slideToggle()
})Vytvořil jsem ti dvě řešení:
https://jsfiddle.net/de2dbd0h/
https://jsfiddle.net/nx5prkh7/
První se načítá po načtení elementů, a nevyužívá tedy onclick.
Druhá využívá onclick, ale funkce se musí načíst před elementama, aby
fungoval onclick (ve kterém se funkci posílá "this").
To je vlastne dobrý nápad, tiež Ti dám príklad na jsfiddle.
Zobrazeno 9 zpráv z 9.
