Soms wil je je informatie op een overzichtelijke manier presenteren op je site. Je kunt denken aan een vraag en antwoord sectie op je site. Om het overzichtelijk te houden kun je kiezen om informatie pas zichtbaar te maken als de bezoeker dit wilt zien.

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

DE INHOUD VAN DE EERSTE VRAAG

TITEL

DE INHOUD VAN DE TWEEDE VRAAG

TITEL

DE INHOUD VAN DE DERDE VRAAG