In en uitklap op je pagina

Eindresultaat, een overzichtelijke en nette oplossing
Stap 1: toevoegen van jQuery aan je site
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
Stap 2: Je tekst opbouwen
Zorg ervoor dat je de titels van je teksten plaatst op de plek waar nu TITEL staat. Plaats je inhoud op de aangegeven plek. Verander geen HTML.
<div class=”layer1″>
<p class=”heading”>TITEL</p>
<div class=”content”>DE INHOUD VAN DE EERSTE VRAAG</div>
<p class=”heading”>TITEL</p>
<div class=”content”>DE INHOUD VAN DE TWEEDE VRAAG</div>
<p class=”heading”>TITEL</p>
<div class=”content”>DE INHOUD VAN DE DERDE VRAAG</div>
</div>
Stap 3: Opmaak, zorg ervoor dat je vraag / antwoord sessie mooi wordt weergegeven
Onderstaande stylesheet
<style>
.layer1 {
margin: 0;
padding: 0;
width: 500px;
}
.heading {
margin: 1px;
color: #fff;
padding: 4px 12px;
cursor: pointer;
position: relative;
background-color:#265c82;
}
.content {
padding: 5px 12px;
background-color:#fefefe;
}
p { padding: 5px 0; }
</style>
Stap 4: Plaats de Javascript die zorgt dat het gaat werken.
Plaats onderaande code op je pagina. Het liefst in de head-sectie. Lukt dit niet ivm gebruik HTML-webonderdeel van Sharepoint, dan plaats je deze code direct onder je aanroep van JQuery in stap 1.
<script type=”text/javascript”>
jQuery(document).ready(function() {
jQuery(“.content”).hide();
//toggle the componenet with class msg_body
jQuery(“.heading”).click(function()
{
jQuery(this).next(“.content”).slideToggle(500);
});
});
</script>
In praktijk
TITEL
TITEL
TITEL