Autor Zpráva
Janča N.
Profil
Ahoj, potřebovala bych poradit, jak udělat univerzální sbalování určitého obsahu na stránce - po kliknutí na nadpis.

Těchto elementů mám na stránce více:
<h2 id="pud">Nadpis kategorie</h2>
    <div class="cont">
    <p>Zde bude text </p>

    </div>

v jquery poté:
 $(document).ready(function($) {
     $('#pud').click(function() {
          $('.cont').animate({
               height: 'toggle'
               }, 500
          );
     });
    
    
});

což dělá přesně to co chci - sbaluje a rozbaluje to konkrétní div

Ale jak to udělat, aby to fungovalo pro více kategorií...

Zruším id u nadpisu, obalím to asi nějakým divem, ale nevím potom, jak se na to mám v jquery odkázat.. S jQuery začínám..

Díky
ShiraNai7
Profil
Třeba přes třídy a použití .each().
Selektor si budeš muset vymyslet. Nejjednodušší by bylo nadpis i obsah umístit do kontejneru s třídou a použít selektor div.kategorie > h2 a pak třeba .children('div.obsah') pro získání elementu s obsahem, který se má sbalovat po kliknutí na nadpis.

$(document).ready(function(){

    $('selektor nadpisu').each(function(){

        $(this).click(function(){
            // nalezeni elementu s obsahem a provedeni akce
        });

    });

});
Janča N.
Profil
Něco dělám evidentně špatně, nyní to nerozbaluje. Nejde ani alert... je tam někde syntaktickáchyba u toho children..
<div class="kateg">
    <h2 class="nadpisKat">Nadpis kategorie</h2>
    <div class="cont" style="display:none;" >
    <p>Zde je text </p>
    </div>
</div>


 $(document).ready(function($) {
 
    $('div.kateg > h2.nadpisKat').each(function(){
 
        $(this).click(function(){
            
            .children('div.cont').animate({
               height: 'toggle'
               }, 500
          );
    
        });
 
    });
    
});
ShiraNai7
Profil
Janča N.:
edit: Možná bych zvolil jiný postup. Sepíšu to.


Tak tu to je. Doporučuji si to projít a ne to pouze slepě použít.

$(document).ready(function(){
 
    // nalezeni vsech kontejneru s kategorii
    $('div.kateg').each(function(){
        
        // nalezeni divu s obsahem
        var obsah = $(this).children('div.cont');
 
        // udalost po kliknuti na nadpis
        $(this).children('h2.nadpisKat').click(function(){
            
            // nedelame nic, pokud je obsah jiz rozbalovan nebo sbalovan
            if(obsah.is(':animated')) {
                return false;
            }
            
            // rozbalit/sbalit
            obsah.slideToggle(200);
            
        });
 
    });
 
});
Janča N.
Profil
To dává smysl,moc díky. Mám ale pořád někde chybu.. Unexpected token ILLEGAL hází u posledních závorek..
ShiraNai7
Profil
Smaž neviditelný znak, který je za posledním středníkem. Musel se mi tam dostat když jsem skript kopíroval přes schránku z jsfiddle.
Janča N.
Profil
Super, díky moc :) Pěkně ošidný tyhle neviditelný znaky, zastaví celej skript..
ShiraNai7
Profil
To jsou. Stalo se mi to poprvé. Nechápu odkud jsem to tam vykopíroval.
Janča N.
Profil
možná jsem to tam měla už já...mám v souboru více funkcí...

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0