Autor Zpráva
Tanaris
Profil
Chci si na web dát výčet zakázek stylem "Název zakázky" a když na něj kliknu rozbalí se mi text s detaily a obrázkem. Hrál jsem si s javascriptem, ale nelíbilo se mi, že to není plynulé rozbalení proto jsem sáhl po jquery. Kód mi, ale dělá neplechu. Když dám pod sebe více odkazů můžu rozbalit a zabalit jen jeden. Navíc když najedu na stránku tak jsou všechy odkazy už rozbalené místo zabalené. Můžete mi poradit jak má script správně vypadat? Tady je část jquery

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){
    $(".btn-slide").click(function(){
        $("#panel").slideToggle("slow");
        $(this).toggleClass("active"); 
        return false;
    });
    });
    </script>

a tady html

<h3 class="slide"><a href="#" class="btn-slide">2012 - Azylový dům Přerov &rarr;</a></h3>

<aside id="panel"> 

<p>
 Prováděná činnost
</p>

<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>

</ul>

<img src="../pictures/partneri_a_vyznamni_zakaznici/partneri/liga na ochranu zvirat.png" alt="stanistrechy.png, 44kB" title="stanistrechy">


</aside> 

<h3 class="slide"><a href="#" class="btn-slide">2012 - Stadion sportu Zlín &rarr;</a></h3>

<aside id="panel"> 


<p>
 Prováděná činnost
</p>

<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>

</ul>

<img src="../pictures/partneri_a_vyznamni_zakaznici/partneri/erkilos.png" alt="liga na ochranu zvirat.png, 44kB" title="erkilos">


</aside> 
Sir Tom
Profil
Tanaris:
<script type="text/javascript">
    $(document).ready(function(){
      $("#panel").css('display', 'none');
      $(".btn-slide").click(function(){
        $(this).find("#panel").slideToggle("slow");
        $(this).toggleClass("active"); 
        return false;
      });
    });

</script>
Tanaris
Profil
Ted to nefunguje vůbec :-D
honzaik
Profil
změň těm aside id na class. id se má používat jen pro jeden element, class pro více, jinak je to celkem to samé.
zde je funkční příklad kterej sem udělal, základní koncept tam je. musíš použít this, aby se to aktivovalo pouze na další "next()" element od toho h3/a
$(document).ready(function(){
    $(".panel").hide(0); // aby byly ty elementy skryty hned po načtení stránky, jde to udělat i přes css display:none myslim.
    $(".slide").click(function(){
        $(this).next(".panel").toggle(1000);
    });
});
http://jsfiddle.net/Wm4pw/1

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: