Hi Marcel,
Opgelet!
Maak voor het aanpassen van je site steeds een back-up!
Maak deze aanpassingen in een ‘childtheme’ van jouw Theme!!
Tip: gebruik ‘one click childtheme’-plug-in.
Hier vind je het perfecte voorbeeld.
http://www.hongkiat.com/blog/css-content-accordion/
- Bekijk de demo
- Download de voorbeeldbestanden en oefen er mee
- Verander de bestandsnaam van het demo-bestand
style.css, in vragenlijst.css
- FTP / upload
vragenlijst.css naar de css map van je [child]theme
- open de header.php in een editor
- voeg de volgende code toe aan de <head> … </head>
<link rel="stylesheet" href="css/vragenlijst.css" />
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
- Open de pagina waar de vragenlijst moet komen.
Klik de tekst/html-tab
- plak de vragen die je hebt gemaakt.
Hieronder een voorbeeld. Elke nieuwe vraag loopt van <section> naar </section>
<div class="accordion vertical">
<section id="v-vraag 1">
<h2><a href="#v-vraag 1">Hoe lang is een touwtje?</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
</section>
</div>
Marcel,
In bovenstaande vertaling zit nog een foutje.
De demo en de voorbeeldbestanden werken.
Ik kijk even hoe ik de vertaling werkend krijg.
Marcel,
Om het werkend te krijgen:
Zorg dat je het volledige pad naar de stylesheet gebruikt.
bv.
<link rel="stylesheet" href="http://www.mijndomijn/wp-content/themes/mijntheme/css/vragenlijst.css" />
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Hallo,
En er is echt geen simpeler manier om zoiets voor elkaar te krijgen? Gewoon een plugin waaraan je verder niets hoeft te doen qua code?
Ik weet dat dit ook met javascript kan, maar lang niet iedereen heeft javascript geïnstalleerd. De HTML oplossing werkt voor echt iedereen.
Ik weet niet of er een plugin is.
Een oplossing in 3 stappen
aanpassen header
kopieren css-bestand en
aanmaken teksten
Leuker kan ik het echt niet maken.
Wellicht heeft een ander het ei van Coloumbus.
