Link som viser mer informasjon?

[Mando23]

Heisann
Jeg lurer på om noen av dere vet om en enkel plugin eller html kode som gjør at noen trykker på en link, og mer informasjon kommer under linken -på samme side.
Slik som read more, bare linken er på siden.
Noen som kan hjelpe?

 

[impel]

Det vanligste er vel å gjøre dette med en liten Javascriptsnutt, men det kan også gjøres uten, f.eks slik:

HTML:

<label>
  <input type="radio" class="lesmer">Les mer...
  <div class="mer">Det var en gang...</div>
</label>

CSS:

.mer, .lesmer {
  display: none;
}

.lesmer:checked ~ .mer {
  display: block;
}

Demo: CodePen - Pen

 

[Tonny Kluften]

https://wordpress.org/plugins/read-more-inline/
WordPress › Read More Right Here « WordPress Plugins

 

[Mando23]

Det vanligste er vel å gjøre dette med en liten Javascriptsnutt, men det kan også gjøres uten, f.eks slik:

HTML:

<label>
  <input type="radio" class="lesmer">Les mer...
  <div class="mer">Det var en gang...</div>
</label>

CSS:

.mer, .lesmer {
  display: none;
}

.lesmer:checked ~ .mer {
  display: block;
}

Demo: CodePen - Pen

Akkurat det jeg leta etter, men når jeg limer den inn på en enkel wordpress side, kommer det opp en boks som du huker av, og teksten automatisk

 

[impel]

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>...):

<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).

 

[Mando23]

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>...):

<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).

Kan jeg lime denne koden rett inn i html på siden? Diven vises uansett.

 

[impel]

Det skal fungere, som i eksempellinken over. Når det er sagt, har vel Wordpress en tendens til å rote litt med det du legger inn av HTML i redigeringsverktøyet. Jeg har ikke brukt Wordpress på en stund, men kanskje noen andre vet om det går an å overstyre / tvinge WP til å beholde HTMLen uendret når man lagrer?