Soliloquy Documentation

Documentation, Reference Materials, and Tutorials for Soliloquy

How to Toggle Slide Caption With the Click of a Button

Toggle Caption (click to caption)

Pretty cool, huh?! This effect is really easy to implement following this guide:


The first portion is the HTML needed to create the toggle switch. In this doc’s example the HTML has been setup to change the wording conditionally if the caption is currently hidden or visible, and prompts the visitor to “hide” or “show” the caption.

This is done by placing an empty <span> tag where we want the “hide” or “show” text to be conditionally shown in the link. If you don’t want to show this text just remove the <span> tag from this example.

Apart from the <span>, the most important portion of the link tag is the class which we target with CSS and Javascript to make the toggle work. You can add more classes to the link if you need to, but the soliloquy-toggle-caption class is required.

<a href="#" class="soliloquy-toggle-caption">Toggle Caption (click to <span></span> caption)</a>


Next, we’ll use some Javascript to add and remove a specific class from the slider to hide and show the caption, and to the toggle link to conditionally show the “hide” and “show” text.

If you aren’t planning to conditionally show the “hide” and “show” text in the toggle link, remove line 6 from the example code below:

<script type="text/javascript">


Lastly, we’ll use a few lines of CSS to actually hide/show the caption based on the class that is added and removed by the Javascript code.

If you aren’t planning to conditionally show the “hide” and “show” text in the toggle link, remove lines 7-9 from the example code below:

/* Hide the caption by default */
.soliloquy-container .soliloquy-caption { display: none !important; }

/* Show the caption when the class "show" is added by the js code on click */
.soliloquy-container { display: block !important; }

/* Conditionally display "hide" or "show" text in the toggle link */
.soliloquy-toggle-caption span::before { content: 'show'; display: inline-block; } span::before { content: 'hide'; }