Zorgen dat javascript zich eerst "leeg maakt" voor hij door gaat.

[Henk1000]

Beste forumleden,

Hulp gevraagd! Ik ben een klein website-je aan het maken, en dat is grappig, want dat kan ik eigenlijk helemaal niet... Maar goed, ik kan een beetje HTML, een beetje CSS en dat was het dan. Maar voor die site die ik aan het maken ben wilde ik graag gebruik maken van een aantal knoppen (4 stuks) met een "uitklappend" tekst vlakje.
Op deze site (http://www.html-site.nl/uitklappen.php)vond ik een java sciptje wat dit mogelijk maakt. Dit werkt prima, en nu heb ik dus meerder knoppen die allemaal hun eigen uitklappend tekst vakje hebben.

Het vervelende is echter dat je ze telkens aan EN UIT moet zetten. Wat ik eigenlijk wil is dat, wanneer je op één van de andere knoppen drukt, de tekst die voortkomt uit de andere knoppen eerst weg gaat.
Kan dit opgelost worden door iets aan het javasriptje toe te voegen o.i.d.?

De code die ik nu gebruik is dus:

<script type="text/javascript">
function kadabra(zap) {
if (document.getElementById) {
var abra = document.getElementById(zap).style;
if (abra.display == "block") {
abra.display = "none";
} else {
abra.display= "block";
}
return false;
} else {
return true;
}
}
  </script>

#tekst1 {
display: none;
}
#tekst2 {
display: none;
}

<div class="container1">
<a href="#" onclick="return kadabra('tekst1');">INFO</a>
</div>
<div class="info-text">
<p id="tekst1">Lorem
ipsum dolor sit amet, consectetur
adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
</p>
</div>
<div class="container2">
<a href="#" onclick="return kadabra('tekst2');">CONTACT</a>
</div>
<div class="contact-text">
<p id="tekst2">Lorem
ipsum dolor sit amet, consectetur
adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

Alle info is welkom!
Bij voorbaat dank, groet Henk

 

[csshunter]

Joi Henk,
Ja, het kan bv. langs de volgende weg:

• Eerst wordt in een variabele genoteerd wat de actuele display-stand (Aan of Uit) van het aangeklikte item is.
• Dan worden alle Meer-teksten gesloten: zonder aanzien des persoons.
• D.w.z. ze krijgen allemaal de Uit-stand (ook al hebben ze die al), en de aangeklikte wordt dus óók (tijdelijk) op Uit gezet als die op Aan moet komen te staan.
• Daarna kan de wisselschakelaar, zoals die nu is, in werking komen.
• Daarbij wordt de bewaarde "echte stand" van het aangeklikte item gebruikt, die in de variabele zit.
• D.w.z. stond het item Uit, dan gaat het nu Aan (en een eventueel Aan staand item van de rest gaat Uit; de rest van de rest stond al uit, wat zo blijft).
  En stond het Aan, dan gaat het Uit (en de hele rest stond dan al Uit, wat zo blijft).

Als je het zonder die variabele zou doen, zou je wel die ene (nadat alles dicht is gezet) open kunnen zetten, maar dan krijg je diezelfde nooit meer dicht als je niet een andere open zet.

Met vriendelijke groet,
CSShunter