top

Posts tagged with leksjon

03.6912Utvide deler av definisjonsliste med jQuery

Endre | Stikkord: , | 0 kommentarer

Søskenbarnet mitt er på besøk for å suge til seg all min kunnskap innenfor hovedsaklig PHP, (X)HTML, JavaScript, CSS og jQuery. Dagens lille utfordring var å kunne åpne og lukke hver del av en definisjonsliste med jQuery, mao klikke på en <dt> så skulle de neste <dd> åpnes/lukkes frem til man støtte på en ny <dt> eller nådde slutten av listen.

JavaScript-koden som skulle til for å oppnå ønsket effekt:

$(document).ready(function() {
  $('#deflist').find('dd').hide().end().find('dt').click(function () {
    $(this).nextAll().each(function () {
        if(this.nodeName == 'DT') return false;
        $(this).slideToggle();
    });
  });
});

HTML-koden som jQuery skulle gjøre noe med:

<dl id="deflist">
  <dt>Transport</dt>
    <dd>Bil</dd>
    <dd>Sykkel</dd>
  <dt>Overnatting</dt>
    <dd>Hus</dd>
    <dd>Hytte</dd>
</dl>
 1