Javascript hide/toggle
Giel
31/07/2009 15:37:00Hi,
Daar ben ik weer. Dit keer heb ik een vraag over Javascript.
Ik ben bezig met een Faq Pagina, en dat wil ik mooi oplossen met javascript. Het werkt al aardig, alleen zit er nog een kleinigheidje in die ik eigenlijk veranderd wil hebben. Als iemand tenminste mij kan helpen.
Ik heb bijv:
Vraag1
Vraag2
Vraag3
Als je op vraag 1 klikt komt er:
Vraag1
hier je antwoord
Vraag2
Vraag3
etc, er komt dus een "verborgen" div te voorschijn. Maar het probleempje wat ik nu heb. Aangezien ik een kleine div heb voor de tekst. Zal de tekst buiten de div vallen. Nu heb ik dit al zo dat het niet erbuiten valt, maar dat de tekst onder de ander div verder zal gaan.
Maar dat vind ik nog niet netjes, ik wil eigenlijk zodra je op 1 vraag klikt, terwijl er al een antwoord staat het antwoord van die andere vraag verdwijnt, en het antwoord van de vraag waar je op klikt tevoorschijn komt.
Snappen jullie het nog een beetje? Hieronder staat in ieder geval het javascript.
Wie kan me helpen? Thnx alvast!
Daar ben ik weer. Dit keer heb ik een vraag over Javascript.
Ik ben bezig met een Faq Pagina, en dat wil ik mooi oplossen met javascript. Het werkt al aardig, alleen zit er nog een kleinigheidje in die ik eigenlijk veranderd wil hebben. Als iemand tenminste mij kan helpen.
Ik heb bijv:
Vraag1
Vraag2
Vraag3
Als je op vraag 1 klikt komt er:
Vraag1
hier je antwoord
Vraag2
Vraag3
etc, er komt dus een "verborgen" div te voorschijn. Maar het probleempje wat ik nu heb. Aangezien ik een kleine div heb voor de tekst. Zal de tekst buiten de div vallen. Nu heb ik dit al zo dat het niet erbuiten valt, maar dat de tekst onder de ander div verder zal gaan.
Maar dat vind ik nog niet netjes, ik wil eigenlijk zodra je op 1 vraag klikt, terwijl er al een antwoord staat het antwoord van die andere vraag verdwijnt, en het antwoord van de vraag waar je op klikt tevoorschijn komt.
Snappen jullie het nog een beetje? Hieronder staat in ieder geval het javascript.
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
$('document').ready(function()
{
$(".toggle").hide();
$(".toggler").click(function() {
$(this).parent().next('div').slideToggle();
});
});
</script>
$('document').ready(function()
{
$(".toggle").hide();
$(".toggler").click(function() {
$(this).parent().next('div').slideToggle();
});
});
</script>
Code (php)
1
2
3
4
2
3
4
<p><a class="toggler">Hier de vraag?</a></p>
<div class="toggle">
Hier het antwoord.
</div>
<div class="toggle">
Hier het antwoord.
</div>
Wie kan me helpen? Thnx alvast!