Uitklaplijst

[Estel]

Hallo, weet iemand een htmlcode voor een soort uitklaplijst, ik bedoel zoals hier. Dat het menuutje zich uitklapt als je op de zin klikt. Bij voorbaat dank voor de reacties!

 

[rv94]

CSS

.menu{display:none;}#menu-1:target, #menu-2:target, #menu-3:target{display:inherit;}

HTML

<p><a href="#menu-1">title 1</a></p>
<div id="menu-1" class="menu">tekst 1</div>

<p><a href="#menu-2">title 2</a></p>
<div id="menu-2" class="menu">tekst 2</div>

<p><a href="#menu-3">title 3</a></p>
<div id="menu-3" class="menu">tekst 3</div>

Dit is één van de vele opties als je nog verdere vragen hebt stel ze gerust.

 

[Estel]

Ja, alleen als ik nu op de tekst klik ga ik gewoon naar de home page en de weer te geven tekst die met een klik zou moeten verschijnen staat er al onder Bedankt voor de moeite

 

[rv94]

Kun je een link sturen met de site waar het opstaat zodat ik kan zien wat er fout gaat.

 

[Estel]

Ah, het is al opgelost, dom foutje bedankt voor de moeite :thumb:

 

[lord4163]

Fijn dat het is opgelost. Als je er nog een mooi effect aan wilt toevoegen, kun je gebruik maken van de jQuery functie fadeToggle().

http://api.jquery.com/fadeToggle/

 

[csshunter]

Opgelost, behalve voor Internet Explorer 8 (en eerder): geen ondersteuning voor de css3-selector :target.
Zie hier...

Waarschijnlijk lukt het wel als je er jQuery op los laat.

Of je kan een simpel javascript toggle(id) gebruiken, dat is wel zo gauw klaar:

<p><a href="#" onclick="toggle('meer-1'); return false">Lees meer ...</a></p>
<div id="meer-1" class="meer">Dit is Meer-tekst 1</div>
 
<p><a href="#" onclick="toggle('meer-2'); return false">Lees meer ...</a></p>
<div id="meer-2" class="meer">Dit is Meer-tekst 2</div>

<p><a href="#" onclick="toggle('meer-3'); return false">Lees meer ...</a></p>
<div id="meer-3" class="meer">Dit is Meer-tekst 3</div>

CSS:

.meer {
    display: none; /* bij opening pagina niets uitgeklapt */
}

[JS]<script type="text/javascript">
function toggle(id){ // dit is de wisselaar
var meer = document.getElementById(id);
meer.style.display = (meer.style.display == 'block') ? 'none' : 'block';
}
</script>[/JS]

• Test: lees-meer-eenvoudig.htm
• Je kunt ze onafhankelijk van elkaar open en dicht klappen.
• Ook voor IE!

Dit is ook de (vereenvoudigde) manier waarop ze het in het voorbeeld bij de vraag gedaan hebben.

• Vervolgens kan je het het zo mooi en/of geautomatiseerd maken als je zelf wilt; zie bv. dit topic.