Esconda / mostre conteúdo começando no meio de um parágrafo

4

Eu preciso ocultar / mostrar conteúdo arbitrário (parágrafos, listas, talvez imagens) com base em um usuário que clica em um link. Isso é bastante fácil, mas estou com muitos problemas tentando adicionar isso no meio de um parágrafo.

Estamos tentando ter um link do tipo "leia mais" em algumas seções da página. Ele precisa ser capaz de começar em qualquer lugar em um parágrafo de texto. Eu tentei isso com uma tag <span> , mas isso causou problemas porque a extensão do conteúdo a ser ocultado pode ter vários parágrafos, listas, etc., então o WordPress fechou o intervalo no final do primeiro parágrafo para torná-lo HTML válido , o que faz sentido.

Em seguida, tentei adicionar uma tag <div> e, em seguida, inlinei o div na minha folha de estilo, mas o WordPress fechou o parágrafo logo antes de adicionar o texto div, que também faz sentido como HTML válido.

Alguém tem uma recomendação sobre como fazer isso? Eu prefiro não remover a adição natural de <p> do WordPress, porque eu acredito que as pessoas que atualizarão o site não vão querer entrar na visualização do código e adicionar tags de parágrafo.

O HTML que estou usando é:

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

Eu tenho isso como meu css:

.hidden-text {
    display: inline;
}

e a pequena jquery que tenho até agora é a seguinte:

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

Não tenho certeza se é melhor postar isso aqui, pois o problema está relacionado diretamente às tags <p> que estão sendo adicionadas ou se seria melhor postá-lo em uma seção de design de front end de o site.

    
por blendergasket 07.12.2015 / 21:05

1 resposta

0

O problema com o que você está tentando fazer é dividir um elemento html de tipo de bloco <p> . No seu exemplo, você efetivamente tem <p><div></p></div> , o que simplesmente não é bom. Então você não pode misturar <p> e <div> desta maneira. Você pode, no entanto, usar uma combinação de parágrafos e classes:

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

Onde pode ser útil expandir </p><p class="hide-from-here"> de um shortcode. Você também pode gerar seu link com o mesmo shortcode. Você pode garantir que o parágrafo com a classe hide-from-here se comporte como se não estivesse lá usando css.

Agora você ainda precisa ocultar os parágrafos restantes. Aqui, o .nextAll do jquery é útil para dar a todos os parágrafos restantes a classe

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

Nesta classe, você define display:hidden , que você alterna com o link (ou remove a classe).

    
por cjbj 11.09.2016 / 15:37