Momenteel heb ik al van alles geprobeerd maar ik kom er totaal niet meer uit.
Helaas heb ik weinig tot geen kennis van jQuery en kan op het internet nergens een voorbeeld vinden van wat ik wil maken.

Eigenlijk is het heel simpel.
- In de bijlage heb ik 5 vlakken.
- Standaard moet er een introductie tekst komen in vlak 5.
- Klik op vlak 1 / 2 / 3 / 4 dan moet de bijbehorende tekst / afbeelding in vlak 5 verschijnen.

Iemand enig idee hoe ik dit kan bewerkstelligen want het is volgens mij redelijk simpel?
Als je hier verstand van heb of weet hoe ik dit moet maken laat het a.u.b. weten ;)

Alvast bedankt!

Zet de text die je in het voorbeeldvlak wilt hebben in een variabel, of in een verborgen div.

Code:

<div style="display:none;" id="hidden_1">Dit is vlak 1</div>
<div style="display:none;" id="hidden_2">Dit is vlak 2</div>
<div style="display:none;" id="hidden_3">Dit is vlak 3</div>
<div style="display:none;" id="hidden_4">Dit is vlak 4</div>
<div style="display:none;" id="hidden_5">Dit is vlak 5</div>
<div id="klikvlak_1" onClick="$('#voorbeeldvlak').html($('#hidden_1').html());">Klik voor vlak 1</div>
<div id="klikvlak_2" onClick="$('#voorbeeldvlak').html($('#hidden_2').html());">Klik voor vlak 2</div>
<div id="klikvlak_3" onClick="$('#voorbeeldvlak').html($('#hidden_3').html());">Klik voor vlak 3</div>
<div id="klikvlak_4" onClick="$('#voorbeeldvlak').html($('#hidden_4').html());">Klik voor vlak 4</div>
<div id="klikvlak_5" onClick="$('#voorbeeldvlak').html($('#hidden_5').html());">Klik voor vlak 5</div>
<div id="voorbeeldvlak">Grote vlak</div>

Volgensmij moet die code zo werken. Begrijp je wat er gebeurt?

@Rob,
Bedankt voor je snelle reactie!
Ik heb het 1 op 1 overgenomen maar ik krijg alleen tekst te zien:

Code:

Klik voor vlak 1
 Klik voor vlak 2
 Klik voor vlak 3
 Klik voor vlak 4
 Klik voor vlak 5
 Grote vlak

Weet niet of het nu ook al zou moeten werken of moet ik nog wat aanpassen qua CSS of?
Ik volg nog niet helemaal wat er gebeurt .. als het werkt kan ik het wel uitvogelen ...

Origineel gepost door Michael Braam

@Rob,
Bedankt voor je snelle reactie!
Ik heb het 1 op 1 overgenomen maar ik krijg alleen tekst te zien:

Code:

Klik voor vlak 1
 Klik voor vlak 2
 Klik voor vlak 3
 Klik voor vlak 4
 Klik voor vlak 5
 Grote vlak

Weet niet of het nu ook al zou moeten werken of moet ik nog wat aanpassen qua CSS of?
Ik volg nog niet helemaal wat er gebeurt .. als het werkt kan ik het wel uitvogelen ...

Dat kan kloppen,
heb je jQuery in de pagina staan?
Wat gebeurt er als je op 1 van die textjes klikt?

@Rob,
Ik wil je ENORM bedanken echt ... zit nu al dagen te "klooien" en het werkt PERFECT!
Nu ga ik hem gewoon flink aanpassen .. en dan zie ik vanzelf hoe het werkt en hoe ik hem kan uitbreiden enz.

Echt nogmaals enorm bedankt!

Geen probleem! Je moet gewoon weten waar je naar moet zoeken met jQuery.. Het meeste zit verborgen achter hele simpele functies, zoals je ziet :)

Volgensmij kan je dit overigens ook nog tweaken met mooie overgangsanimaties.

Origineel gepost door Rob Quist

Geen probleem! Je moet gewoon weten waar je naar moet zoeken met jQuery.. Het meeste zit verborgen achter hele simpele functies, zoals je ziet :)

Volgensmij kan je dit overigens ook nog tweaken met mooie overgangsanimaties.

Heb hem inmiddels werkend gekregen in de website waar ik nu aan werk en het werkt perfect :)
Heb je tips / hints om die animaties erin te krijgen?

google maar op animation with CSS3 and jQuery tutorial

Ik denk dat je er een hide in moet zetten, dan de html functie, en dan de show functie.