domingo, 13 de dezembro de 2015

HTML: expandir e colapsar texto

Primeiro, é necessário seguir os passos nesse link e nesse, para colocar o código HTML necessário no layout do seu blog. Eu já fiz isso. Depois basta fazer o seguinte:


Digitar o seguinte código:

&lt div class="hidden-section-container" &gt
&lt div class="sh-section-btn" &gt
Título
&lt /div &gt
&lt div class="h-section-cont shw-box" &gt
Conteúdo escondido
&lt /div &gt
Texto abaixo do escondido
&lt /div &gt 



<div class="hidden-section-container">
<div class="sh-section-btn">
Título
</div>
<div class="h-section-cont shw-box">
Conteúdo escondido
</div>
Texto abaixo do escondido
</div>



Dá o seguinte resultado:

Título
Conteúdo escondido
Texto abaixo do escondido



Como exibir texto HTML numa postagem:
Substituir todos os &lt por & l t e todos os &gt por & g t

2 comentários:

  1. <div class="hidden-section-container">
    <div class="sh-section-btn">
    Título
    </div>
    <div class="h-section-cont shw-box">
    Conteúdo escondido
    </div>
    Texto abaixo do escondido
    </div>

    ResponderExcluir
  2. Código com quebras, para divulgação.

    <<!-- QUEBRA -->div class="hidden-section-container">
    <<!-- QUEBRA -->div class="sh-section-btn">
    Título
    <<!-- QUEBRA -->/div>
    <<!-- QUEBRA -->div class="h-section-cont shw-box">
    Conteúdo escondido
    <<!-- QUEBRA -->/div>
    Texto abaixo do escondido
    <<!-- QUEBRA -->/div>

    ResponderExcluir