Hej Mick,
Det kan udføres vha. Javascript- eller jQuery som allerede er pointeret.
Jeg vil dog anbefale dig, at lade være at sætte en fast højde på de bokse, som bliver "foldet ud", når der klikkes på dem.
Det kan klares ganske simpelt:
1) Hav en container for hver boks. Tildel de enkelte containers en klasse.
Kode: Vælg alt
<div class="container"></div>
2) Inde i containeren viser du en lille del af din tekst.
Kode: Vælg alt
<div class="container">
<p>The shown text. Except.</p>
</div>
3) Tilføj et element, som som udgangspunkt er skjult. Tildel dette element en klasse.
Kode: Vælg alt
<div class="container">
<p>The shown text. Except.</p>
<p class="notShown" style="display:none;">
This text is not shown. Click the container first.
</p>
</div>
Vi har altså nu en container, en tekst der vises samt en tekst, som ikke vises.
Du vil tilføje funktionalitet til de forskellige containers. Det klarer jeg vha. jQuery:
Kode: Vælg alt
<script>
$(document).ready(function() {
$('.container').click(function(){
$(this).closest('.container').find('.notShown').toggle();
})
});
</script>
Lidt forklaring:
Linje 1: Vi viser, at det er et script vi skal igang med.
Linje 2: Da vi ikke kan manipulere data før siden er klar, beder vi jQuery om, at vente med funktionaliten før dokumentet er klart.
Linje 3: Vi vælger vores selector. I denne omgang er det containeren. Vi bestemmer os for, at når der klikkes på en container, så skal der ske noget.
Linje 4: Her sker magien. Når der klikkes på en container, finder vi den tætteste container. Det er den vi har klikket på. I den container, finder vi klassen "notShown". Når der klikkes, skal der toggles mellem vis / skjul.
Linje 5-7: Vi lukker for tidligere starter.
Du kan oprette så mange containers som du har lyst til. Det er kun den aktuelle container, som bliver vist.
Eksempelvis kan du gøre følgende:
Kode: Vælg alt
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<p>The shown text. Except.</p>
<p class="notShown" style="display:none;">
This text is not shown. Click the container first.
</p>
</div>
<div class="container">
<p>The shown text. Except.</p>
<p class="notShown" style="display:none;">
This text is not shown. Click the container first.
</p>
</div>
<div class="container">
<p>The shown text. Except.</p>
<p class="notShown" style="display:none;">
This text is not shown. Click the container first.
</p>
</div>
<script>
$(document).ready(function() {
$('.container').click(function(){
$(this).closest('.container').find('.notShown').toggle();
})
});
</script>
</body>
</html>
Her vises der 3 simple containers, og du kan klikke på hver eneste for at vise indholdet af "notShown".
Du kan ændre navnene som du lyster, du skal bare huske at rette til i jQuery delen.
vh,
Edit: Jeg glemte vidst at tilføje følgende:
Hvis der er tale om en masse forskellig information, herunder billeder, tekster osv, som ikke skal vises til at starte med, skal du nok skifte <p class="notShown"> ud med <div class="notShown">. Herefter kan du smide så meget information ind, som du har lyst til, og ikke kun tekst.
