JQuery Accordion

[sam15]

Hallo. Ich habe ein Accordion-Menu gemacht (). Bis jetzt zeigt es mir nur den ersten Eintrag an wenn das Accordion nach einem Click aufklappt. Ich habe aber mehrere Einträge und muss mit Javascript abfragen, wieviele <dd> Elemente es hat und diese Anzeigen lassen. Also wahrscheinlich etwas wie "for (var i=0; i<this.length; i++) einbauen. kann mir jemand weiterhelfen?

HTML

<dl id="accordion">

<dt><a href="">This is what you would click on to show the content</a></dt>
<dd>Pellentesque</dd>
<dd>Lorem pretium</dd>

<dt><a href="">Another Line Item</a></dt>
<dd>Donec nec justo</dd>
<dd>Lorem pretium</dd>

<dt><a href="">And Another</a></dt>
<dd>Lorem pretium</dd>
<dd>Lorem pretium</dd>

</dl>

JQuery

$(document).ready(function($) {
    $('#accordion dd').hide();
    $('#accordion dt a').click(function(){
    $('#accordion dd').slideUp(200);
    $(this).parent().next().slideDown(200);
    return false;
    });
});

 

[Myhar]

AW: JQuery Accordion

Warum machst du ein Menü mit definition-Lists? Da solltest du besser eine ungeordnete Liste (<ul>) nehmen.
Wenn du jetzt deine Unterpunkte in eine eigene Liste gibst, dann funktioniert auch dein JS.
Ja, man kann auch dein jetziges JS anpassen, damit es auch für deine semantisch inkorrekte Navigation funktioniert, jedoch würde ich davon abraten.
Mit $(this).parent().next().slideDown(200); blendest du nur das erste dd Element ein. Den Bereich müsstest du erweitern, damit alle weiteren <dd> eingeblendet werden.

 

[sam15]

AW: JQuery Accordion

Danke für deine Antwort. Dieses Accordion ist ein klassischer Fall einer definition list, wie eigentlich jedes Accordion.

Mit $(this).parent().next().slideDown(200); blendest du nur das erste dd Element ein. Den Bereich müsstest du erweitern, damit alle weiteren <dd> eingeblendet werden.

Soweit bin ich auch gekommen. Aber wie kann ich dies erweitern? Leider sind meine Javascript Skills nicht besonders gut.

 

[fexx]

AW: JQuery Accordion

Danke für deine Antwort. Dieses Accordion ist ein klassischer Fall einer definition list, wie eigentlich jedes Accordion.

Nein. Wenn du zum Beispiel eine Artikel Auflistung als Accordion hast, mit einer Überschrift und entsprechendem Content, ist eine DL fehl am Platz. Auch für eine Navigation.

Warum setzt du dein Markup nicht so um:

<ul id="navigation">
     <li>Überpunkt
          <ul>
               <li>Unterpunkt</li>
               <li>Unterpunkt</li>
          </ul>
     </li>
     <li>Überpunkt
          <ul>
               <li>Unterpunkt</li>
               <li>Unterpunkt</li>
          </ul>
     </li>
</ul>

$('#navigation li ul').hide(); 
$('#navigation li:first').children('ul').show(); 

$('#navigation li').click(function(){     
    if( $(this).children('ul').is(':hidden') ) {          
        $[COLOR=#88FF88][B]([/B][/COLOR]'#navigation li ul'[COLOR=#88FF88][B])[/B][/COLOR].slideUp();          
        $(this).children('ul').slideDown();      
    }     
});

http://jsfiddle.net/kXWnD/1/

 

[Myhar]

AW: JQuery Accordion

Ist in Ordnung, dann belasse es bei der <dd>

Bzgl des JS:
Fertigen Code kann ich dir hier nicht liefern, aber einmal einen Denkansatz:
Du brauchst eine Funktion, welcher du das aktuelle <dd> Element übergibst. Sollte dann $(this).next() auch ein <dd> Element sein, dann rufst du wieder die slide-down Funktion auf.
Beim Programmieren musst du aufpassen, dass keine Endlosschleife entsteht, du also das aktuelle <dd> Element richtig übergibst und nicht immer das selbe Element verwendest.

PS: Auch wenn die Seite noch nicht fertig ist, ein paar Validierungsfehler finden sich noch (und die sollten auch sehr einfach zu beheben sein.)

L. G.

 

[Sling]

AW: JQuery Accordion

Nutze doch einfach das jQuery Accordion Plug in das geht einfach und schnell und erfüllt all deine Vorstellungen