Use Shortcodes

[Useful shortcodes] Expands

This is a set of the experiments with different implementation for the expand components that can be used like a Hugo shortcode inside a page content.

The couple of the expands created with pure CSS approach only

Shortcode

{{<pure-expand title="Title of expand" class="pure-expand-green">}}Content of the expand{{</pure-expand>}}

Some of the demos

Repellat unde aperiam natus consectetur corporis perferendis eius ex magni inventore enim deleniti architecto facilis nihil
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quod, tempore ipsam, quidem dolorum et doloremque id aliquam fugiat autem architecto eaque numquam quae facere. Iure laborum iste eum magnam obcaecati facilis reprehenderit, incidunt dicta sit expedita! Repellat unde aperiam natus consectetur corporis perferendis eius ex magni inventore enim deleniti architecto facilis nihil possimus consequatur ea aliquam quod omnis cumque voluptatibus facere libero necessitatibus esse nostrum, beatae. Explicabo eum possimus illo, incidunt dolorem soluta et architecto repellat modi, qui quo aut delectus, ducimus nesciunt velit perspiciatis praesentium. Perspiciatis non quis dolore rem voluptatem adipisci vero, tempore recusandae odit praesentium cum quo, obcaecati voluptas sequi laudantium hic impedit suscipit alias at optio. Impedit unde sunt modi et, labore corporis ea dolor ad eveniet deleniti porro ipsum culpa molestias expedita sequi id, illo dolorum perferendis est ratione assumenda provident quis corrupti dolores nesciunt. Nihil reiciendis vero at laudantium, cupiditate, blanditiis delectus quod optio ipsum ab nemo architecto ipsa sint, totam porro corporis nobis aspernatur non veniam maiores, soluta a nam vel. Non nisi atque, ea quasi error saepe inventore vero id a aspernatur quas, voluptates mollitia qui ipsam soluta omnis nulla, repellendus, pariatur ipsa. Dolore amet incidunt rem itaque ad nulla maxime.
Nihil reiciendis vero at laudantium, cupiditate, blanditiis delectus quod optio ipsum ab nemo architecto ipsa sint

The expands created with help of pure JavaScript and the CSS animation

Shortcode

{{<expand title="Customized expand" class="expand-green">}}Content of the expand{{</expand>}}

Some of the demos