Collapse-O-Matic

Crie blocos de texto que são exibidos ou ocultados ao clicar (estilo “accordion”).

Demonstração:

Título opção 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed pellentesque dolor. In rhoncus arcu id dui cursus, non efficitur mi posuere. Pellentesque aliquam vulputate lectus ac tincidunt. Sed bibendum ex sem, quis porta nisl interdum quis. Phasellus viverra arcu non elementum facilisis. Integer ut dui a orci tristique lobortis non quis nibh. Fusce ut tempus eros. Suspendisse potenti. Vestibulum facilisis tincidunt nulla sit amet sollicitudin. Praesent imperdiet ex semper elit congue laoreet. Aenean efficitur turpis nibh, ut auctor nisi interdum eget. Duis et tortor non lectus consectetur viverra in ut metus. Maecenas auctor diam et enim semper tempus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed commodo consectetur libero, vitae eleifend nulla scelerisque eget. Morbi sodales ligula ut ante volutpat, ac ultricies enim malesuada.

Título opção 2

Sed sed diam consectetur nulla semper fermentum. Mauris tristique metus porta libero facilisis, in commodo risus elementum. Nullam pretium ex sed tellus pretium imperdiet. Sed elementum ullamcorper ante, in eleifend arcu malesuada non. Donec nec molestie sem, non porta turpis. Vestibulum faucibus, purus at dictum maximus, magna enim egestas massa, at pulvinar massa leo a neque. Integer sit amet diam sed nunc pharetra tincidunt. Curabitur et porta dolor, eu lobortis neque. Sed auctor euismod hendrerit. Fusce dolor tortor, lacinia sed suscipit ac, hendrerit accumsan ante. Vivamus maximus ipsum nec nulla feugiat pellentesque.

Título opção 3

Nunc accumsan vestibulum velit ut iaculis. Maecenas rhoncus vel magna a fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in maximus lorem, ac auctor enim. Curabitur lobortis purus eu mauris auctor, non tincidunt purus dignissim. Pellentesque blandit urna nec eros congue, et tristique leo accumsan. Ut non elit at diam varius posuere vel vel turpis. Integer ut velit in nibh ornare porttitor pharetra sit amet purus. Phasellus dapibus, est et dapibus pharetra, neque nunc tempus nunc, non aliquet arcu risus et mi. In hac habitasse platea dictumst. Aliquam gravida blandit est, nec rutrum libero dignissim a. Aliquam erat volutpat. Pellentesque a felis in augue vestibulum luctus.

Ativação e utilização:

Ative o plugin Collapse-O-Matic no menu Plugins;
O conteúdo deve ser inserido em blocos delimitados pelos shortcodes [expand] e [/expand], conforme modelo abaixo:

[expand title="TÍTULO DO TÓPICO" tag="strong" rel="-highlander"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed pellentesque dolor. In rhoncus arcu id dui cursus, non efficitur mi posuere.
[/expand]

Para obter a mesma aparência da demonstração, acesse Aparência > Personalizar > CSS adicional e cole o código abaixo:

/* collapse-o-matic */

p .collapseomatic {
  margin: -1.25em 0;
}
.collapseomatic,
.collapseomatic_content {
  border: 1px solid #c9c9c9;
  border-radius: 2px;
  padding: 10px 15px;
}
.collapseomatic {
  background: linear-gradient(to bottom,#ffffff 0%,#f2f2f2 100%) repeat scroll 0 0;
  display: block;
}
.collapseomatic::before {
  content: "+ ";
}
.collapseomatic.colomat-close::before {
  content: "\2013"" ";
}
.collapseomatic_content {
  margin: 0;
}
.collapseomatic:hover {
  text-decoration: none;
}
.colomat-close {
  color: #c00;
}

Clique aqui para acessar a documentação completa do plugin.

Publicado em 28/11/2022, nas categorias Apresentação e Multimídia, Plugins.