jquery aufklapper

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Du machst das aufklappen auf Basis der Klasse der HTML-Elemente. Wenn du beide einzeln aufklappen willst, musst du den Elementen IDs geben und auf der Basis aufklappen.

    Quellcode

    1. $(document).ready(function(){
    3. //Remove outline from links
    4. $("a").click(function(){
    5. $(this).blur();
    6. });
    8. $("#contslide1").click(function(){
    9. if ($("#subtext1").is(":hidden")) {
    10. $("#subtext1").slideDown("slow");
    11. } else {
    12. $("#subtext1").slideUp("slow");
    13. }
    14. });
    16. });
    Alles anzeigen


    Quellcode

    1. <div id="contslide1">
    2. <div class="aufklapper"><span>News ausklappen</span></div>
    3. <p id="subtext1" style="display: none;">Text</p>
    4. </div>


    So ist es übrigens auch in den jQuery-Docs beschrieben: api.jquery.com/slideDown/

    Das ganze kann man natürlich noch generischer machen. Ein Tipp: Arbeite mit "this". Aber das hier sollte als Anfang genügen

    Edit: OK, ich berichtige mich. Vergiss was ich oben geschrieben habe. Dir fehlt lediglich der Schritt eine Ebene tiefer im DOM-Baum. Das geht mit Children:

    Quellcode

    1. $(document).ready(function(){
    3. //Remove outline from links
    4. $("a").click(function(){
    5. $(this).blur();
    6. });
    8. $("#contslide1").click(function(){
    9. if ($(this).children().next("p.subtext").is(":hidden")) {
    10. $(this).children().next("p.subtext").slideDown("slow");
    11. } else {
    12. $(this).children().next("p.subtext").slideUp("slow");
    13. }
    14. });
    16. });
    Alles anzeigen


    Quellcode

    1. <div class="contslide">
    2. <div class="aufklapper"><span>News ausklappen</span></div>
    3. <p class="subtext" style="display: none;">Text</p>
    4. </div>

    Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von mad ()