Skript pro zobrazení a skrytí elementů na stránce. Univerzálně stačí přiřadit třídy showhider-X „tlačítku“ a showhide-X prvku, který chceme skrýt (kde X je číslo, které spojuje elementy).

HTML
<p><input id="checkbox" class="checkboxstyle" type="checkbox" /><label class="showhider-1" for="checkbox">Po kliknutí se zatrhne checkbox a rozjede skrytý div</label>
<div class="showhide-1" style="display: none;">Show / hide DIV</div></p>

Javascript
<script>
//ukaž, když zatrhneš
$("[class*='showhider-']").on("click", function(){
var showhidenumber= $(this).attr("class").split("howhider-")[1].split(" ")[0]; //vezmu rovnou druhou část za showhider; číslo. A kdyby bylo více classů za sebou, tak vemu jen číslo za "showhider-"
$(".showhide-" + showhidenumber).slideToggle();
});

//když je zatrhlý při načtení stránky, tak ukaž
$("[class*='showhider-']").each(function() {
if ($(this).prev().is(':checked')) {
var showhidenumber= $(this).attr("class").split("howhider-")[1].split(" ")[0]; //vezmu rovnou druhou část za showhider; číslo. A kdyby bylo více classů za sebou, tak vemu jen číslo za "showhider-"
$(".showhide-" + showhidenumber).slideToggle();
}});
</script>

DEMO:


Kategorie: Poznámky

Napsat komentář

Vaše emailová adresa nebude zveřejněna.

This site uses Akismet to reduce spam. Learn how your comment data is processed.