Ocultar / mostrar contenido comenzando en la mitad de un párrafo

4

Necesito poder ocultar / mostrar contenido arbitrario (párrafos, listas, tal vez imágenes) en base a un usuario que hace clic en un enlace. Esto es bastante fácil, pero estoy teniendo muchos problemas al intentar agregar esto en medio de un párrafo.

Estamos tratando de tener un enlace tipo "leer más" en ciertas secciones de la página. Debe poder comenzar en cualquier parte de un párrafo de texto. Intenté esto con una etiqueta <span> , pero causó problemas porque la extensión del contenido para ocultar puede tener que contener varios párrafos, listas, etc., por lo que WordPress cerró la extensión al final del primer párrafo para que sea válido HTML , lo que tiene sentido.

A continuación, intenté agregar una etiqueta <div> , luego inserté el div en mi hoja de estilo, pero WordPress cerró el párrafo justo antes de agregar el texto div, que también tiene sentido como HTML válido.

¿Alguien tiene una recomendación sobre cómo hacer esto? Prefiero no eliminar la adición natural de WordPress de las etiquetas <p> porque anticipo que las personas que actualizarán el sitio no querrán ingresar a la vista de código y agregar etiquetas de párrafos.

El HTML que estoy usando es:

<strong>What is community acupuncture?</strong> Here is the text that will show 
before the hidden section<div class="hidden-text"> Here is the rest of the paragraph 
in the hidden section.</p>

<p>Here is another paragraph of text that needs to be hidden. I realize that it is 
not valid HTML to have a div tag start in the middle of one paragraph and then encase 
a couple more paragraphs or a list or whathaveyou, which is why I am wondering how 
anyone else handled this issue.</p></div>

Tengo esto como mi css:

.hidden-text {
    display: inline;
}

y el pequeño jquery que tengo hasta ahora es el siguiente:

$('.hidden-text').before("...").hide().after("<a href='#' class='hidden-text-toggle'>Read More</a>");

No estoy seguro de si es mejor para mí publicar esto aquí, ya que el problema se relaciona directamente con las etiquetas <p> que se están agregando, o si sería mejor publicarlo en una sección de diseño de front-end de el sitio.

    
pregunta blendergasket 07.12.2015 - 21:05

1 respuesta

0

El problema con lo que intentas hacer es dividir un tipo de bloque html element <p> . En su ejemplo, efectivamente tiene <p><div></p></div> , que simplemente no es bueno. Así que no puedes mezclar <p> y <div> de esta manera. Sin embargo, puedes usar una combinación de párrafos y clases:

<p>Text</p><p class="hide-from-here">More text</p>

Donde podría ser útil expandir </p><p class="hide-from-here"> desde un shortcode. También podrías generar tu enlace con el mismo shortcode. Puede asegurarse de que el párrafo con la clase hide-from-here se comporte como si no estuviera usando css.

Ahora todavía necesitas ocultar los párrafos restantes. Aquí .nextAll de jquery es útil para dar a todos los párrafos restantes la clase

$("p:hide-from-here").nextAll().addClass( "following-paragraphs" );

En esta clase, define display:hidden , que alterna con el enlace (o elimina la clase).

    
respondido por el cjbj 11.09.2016 - 15:37

Lea otras preguntas en las etiquetas