<label>
<input type="radio" class="lesmer">Les mer...
<div class="mer">Det var en gang...</div>
</label>
.mer, .lesmer {
display: none;
}
.lesmer:checked ~ .mer {
display: block;
}
Det vanligste er vel å gjøre dette med en liten Javascriptsnutt, men det kan også gjøres uten, f.eks slik:
HTML:
Kode:<label> <input type="radio" class="lesmer">Les mer... <div class="mer">Det var en gang...</div> </label>
CSS:
Kode:.mer, .lesmer { display: none; } .lesmer:checked ~ .mer { display: block; }
Demo: CodePen - Pen
<style>.mer, .lesmer {
display: none;
}
.lesmer:checked ~ .mer {
display: block;
}</style>
Det betyr at CSSen ikke er lagt inn, eller ligger feil plassert. Du kan enten legge den inn i CSS-filen til Wordpress-temaet, eller i en style-tagg rett i HTMLen (f.eks over <label>...):
Kode:<style>.mer, .lesmer { display: none; } .lesmer:checked ~ .mer { display: block; }</style>
Det CSSen gjør er at den skjuler avhukingsboksen og diven når siden lastes, men viser diven når "lesmer"-knappen er markert (selv om den ikke vises på siden).