Dat is mijn huidige code, die te zien is op: http://multi-drivers.nl/diensten.html

Wanneer je op een link klikt, verschijnt de tekst van die link. Maar wanneer ik op de volgende link klik verschijnt de tekst van de volgende link onder de andere.

Wat ik wil is dat als ik op een volgende link klik, de vorige tekst verdwijnt en de nieuwe alleen tevoorschijn komt.

Kan iemand mij hier mee helpen?

Code:

<a href="javascript:showOrHide('layer1')">Vakantievervoer</a><br />
<a href="javascript:showOrHide('layer2')">Rent a Bob</a><br />
<a href="javascript:showOrHide('layer3')">Valet parking</a><br />
<a href="javascript:showOrHide('layer4')">Auto transporten</a><br />
<a href="javascript:showOrHide('layer5')">Vliegveld vervoer</a><br />
<a href="javascript:showOrHide('layer6')">Koeriersdiensten (bijrijder)</a><br />
<a href="javascript:showOrHide('layer7')">Business-chauffeur</a><br />
<a href="javascript:showOrHide('layer8')">Ad- Hoc vervoer</a><br />
<a href="javascript:showOrHide('layer9')">High-class entrance</a>



<div id="layer1">U kijkt uit naar de vakantie maar u ziet tegenop naar die lange reis, wij bieden de oplossing. Multi-Drivers beschikt over chauffeurs die allen drie of meerdere talen spreken, dit is altijd handig in het buitenland. Voor vakantievervoer bieden wij u chauffeurs met ervaring in langeafstands reizen.</div>
<div id="layer2">Ook altijd een discussie voor het stappen gaan over wie de Bob wordt. Een avond stappen zonder alocohol ziet u niet zitten. Dit is dan waarschijnlijk ook de reden dat de Bob heel de avond met een boos humeur meefeest. Bij Multi-Drivers kunt u ook terecht voor onze thuisbreng service. Om het allemaal nog aantrekkelijker te maken, garanderen wij u dat onze chauffeurs binnen een uur bij u aanwezig zullen zijn, waar dan ook in Nederland. Altijd handig als úw Bob zich toch niet kon inhouden!</div>
<div id="layer3">Organiseert u een groot bijeenkost of feest, onze valet parkers zorgen ervoor dat u bij een beperkt parkeerruimte toch genoeg plaats heeft voot het vervoer van uw gasten. Er wordt hier met een systeem gewerkt dat zorgt voor efficiente ruimte gebruik met snelle doorstroming.</div>
<div id="layer4">Om de een of andere reden wilt u uw auto verplaatsen. Uw auto moet naar de garage worden gebracht of hiervandaan worden opgehaald. Het probleem is alleen dat u hier geen tijd voor heeft. U kunt gerust contact met ons opnemen, waarnaar wij uw auto naar gewenste locatie zullen vervoeren.</div>
<div id="layer5">U gaat op vakantie of zakenreis, alleen u heeft heel wat bagage meegenomen waardoor de keuze om de trein naar het vliegveld te nemen wegvalt. Met de auto gaan is dan wat er in u opkomt, maar waar laat u de auto staan als u vertrekt? Onze chauffeurs komen u bij de gewenste locatie ophalen, hier zullen ze u helpen met uw bagage. Eenmaal op het vliegveld zullen ze u vervolgens weer helpen met uw bagage. Uw auto wordt tot slot op de door u aangegeven locatie bezorgd. Zo gewenst, kunt na terugkomst weer met uw eigen auto worden opgehaald en naar gewenste bestemming worden gereden. Dit allemaal vertrouwelijk in uw eigen auto en heel wat goedkoper dan met een taxi.</div>
<div id="layer6">Op het laatste moment komt u erachter dat uw koerier onverwachts ziek is. Het probleem is dat uw leverancier op u rekent, dus u kunt zich geen vertraging veroorloven. Wij verzekeren u dat uw spullen veilig en snel vervoerd zullen worden naar uw client. Wij staan open voor al uw koerierswerk. Hiernaast leveren wij ook bijrijders, dit is altijd handig als u waardevolle spullen moet vervoeren. Een van onze medewerkers zal dan meerijden met uw koerier. Het is algemeen bekend dat onder het gebruik van het vierogen-principe misbuik wordt vermeden.</div>
<div id="layer7">Heeft u een belangrijke vergadering en wilt u graag door een privé-chauffeur worden vervoerd, dan bent u bij ons aan het goede adres. Onze chauffeurs hebben zowel nationaal als internationaal diverse diplomaten vervoerd. Een privé-chauffeur is altijd handig als u uw vervoerstijd handig wilt benutten.</div>
<div id="layer8">Onverwachts vervoer nodig? Wij staan binnen no-time voor uw deur om u zo snel mogelijk naar uw bestemming te brengen.</div>	
<div id="layer9">U wilt een indrukwekkende entree maken, maar u beschikt zelf niet over luxieus vervoer. Dankzij samenwerkingen kunnen wij u een ruim aanbod van luxieuze auto’s inclusief chauffeur aanbieden, dit allemaal tegen een scherpe prijs. High-class entrance is altijd handig als u indruk wilt maken op uw omgeving.</div>

<body onload="beginfase()">
<script type="text/javascript">
<!--
function showOrHide(value) 
{ 
  if (document.getElementById(value).style.display == 'none') 
  { 
    document.getElementById(value).style.display = 'block'; 
  } 
  else 
  { 
    document.getElementById(value).style.display = 'none'; 
  } 
} 

function beginfase()
{
  document.getElementById('layer1').style.display = 'none'; 
  document.getElementById('layer2').style.display = 'none';
  document.getElementById('layer3').style.display = 'none';
  document.getElementById('layer4').style.display = 'none';
  document.getElementById('layer5').style.display = 'none';
  document.getElementById('layer6').style.display = 'none';
  document.getElementById('layer7').style.display = 'none';
  document.getElementById('layer8').style.display = 'none';
  document.getElementById('layer9').style.display = 'none';

}
//-->
</script>

Werkt met jQuery, dat bied je veel makkelijkere opties. Geef al je div's naast hun unieke ID ook de class "notice" mee of iets en je kunt dit gebruiken:

$('.notice').css('display', 'none');

om ze allemaal onzichtbaar te maken.

In je ShowOrHide(id) code zet je dan:

$('.notice').css('display', 'none');
$('#layer' + id).css('display', 'block');

dus eerst alles dicht en dan alleen die wat je aanklikt open..

Mijn voorkeur gaat net als Joshua uit naar jQuery.

Om toch een directe oplossing aan te dragen voor je probleem:
Voer je gedefinieerde functie "beginfase" uit als er op een link geklikt wordt, dan worden alle div's gesloten.
Dit kan als volgt:

<a href="javascript:beginfase(); javascript:showOrHide('layer1')">Vakantievervoer</a><br />

Etc. voor de overige links.

@Lodewijk, dit is makkelijker:

Code:

<body onload="beginfase()">
<script type="text/javascript">
<!--
function showOrHide(value) 
{ 
  beginfase();
  if (document.getElementById(value).style.display == 'none') 
  { 
    document.getElementById(value).style.display = 'block'; 
  } 
  else 
  { 
    document.getElementById(value).style.display = 'none'; 
  } 
} 

function beginfase()
{
  document.getElementById('layer1').style.display = 'none'; 
  document.getElementById('layer2').style.display = 'none';
  document.getElementById('layer3').style.display = 'none';
  document.getElementById('layer4').style.display = 'none';
  document.getElementById('layer5').style.display = 'none';
  document.getElementById('layer6').style.display = 'none';
  document.getElementById('layer7').style.display = 'none';
  document.getElementById('layer8').style.display = 'none';
  document.getElementById('layer9').style.display = 'none';

}
//-->
</script>

Waarom jQuery gebruiken voor zo iets simpels? Je gaat toch geen hele Library inladen voor alleen de .css selector?

@TS;
Gooi een div om je huidige divjes met de id 'items', zet standaard de style 'display' van de divs in die div 'items' op 'none', en gebruik onderstaand stukje plain JS.

Code:

<script type="text/javascript">
<!--
function showOrHide(id)
{
    var items = document.getElementById('items').childNodes;
    for(var i = 0; i < items.length; i++)
    {
        if(items[i].tagName=='DIV')    items[i].style.display = 'none';
    }
    document.getElementById(id).style.display = 'block';
}
//-->
</script>

Origineel gepost door J. Buitenhuis

Waarom jQuery gebruiken voor zo iets simpels? Je gaat toch geen hele Library inladen voor alleen de .css selector?

@TS;
Gooi een div om je huidige divjes met de id 'items', zet standaard de style 'display' van de divs in die div 'items' op 'none', en gebruik onderstaand stukje plain JS.

Code:

<script type="text/javascript">
<!--
function showOrHide(id)
{
    var items = document.getElementById('items').childNodes;
    for(var i = 0; i < items.length; i++)
    {
        if(items[i].tagName=='DIV')    items[i].style.display = 'none';
    }
    document.getElementById(id).style.display = 'block';
}
//-->
</script>

Ik ben met je eens dat een library inladen wel afgewogen moet worden. Maar er zijn prima mogelijkheden om dit te cashen. Bovendien vind ik het in sommige gevallen wel waard om ietwat snelheid verlies te accepteren op de vele voordelen die het bied, schonere code om maar iets te noemen (nu worden functies opgeroepen in de href, wat als de gebruiker geen javascript aan heeft staan oid?).
Maar goed, mijn advies was vooral omdat het eenvoudiger is.

@J.Buitenhuis;

dat kan natuurlijk ook.. ik wilde enkel een alternatief laten zien (en dat jQuery hier dus veel makkelijkere opties voor heeft (de selectors dus indd)