Show/Hide Buttons

Hiding content by default

Code

{% include showhidebutton.html showtext="show paragraph" hidetext="hide paragraph" target=".myspecialpara" %}

<p class="myspecialpara">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem exercitationem iusto architecto, voluptatibus nam, officiis ad omnis similique dicta soluta eligendi veritatis iste harum necessitatibus nemo consectetur corporis corrupti recusandae.</p>

HTML output (DO NOT USE)

<button class="showhidebutton button-icon button-small" data-target=".myspecialpara" aria-expanded="false" data-showtext="show paragraph" data-hidetext="hide paragraph">show paragraph</button>

<p class="myspecialpara">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem exercitationem iusto architecto, voluptatibus nam, officiis ad omnis similique dicta soluta eligendi veritatis iste harum necessitatibus nemo consectetur corporis corrupti recusandae.</p>

Showing content by default

Code

{% include showhidebutton.html showtext="show paragraph" hidetext="hide paragraph" target=".myspecialpara2" default="show" %}

<p class="myspecialpara2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem exercitationem iusto architecto, voluptatibus nam, officiis ad omnis similique dicta soluta eligendi veritatis iste harum necessitatibus nemo consectetur corporis corrupti recusandae.</p>

HTML output (DO NOT USE)

<button class="showhidebutton button-icon button-small" data-target=".myspecialpara2" aria-expanded="true" data-showtext="show paragraph" data-hidetext="hide paragraph">hide paragraph</button>

<p class="myspecialpara2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem exercitationem iusto architecto, voluptatibus nam, officiis ad omnis similique dicta soluta eligendi veritatis iste harum necessitatibus nemo consectetur corporis corrupti recusandae.</p>