Toggle Shortcode

Last Updated on

Toggle shortcode allows you display a toggle box to show/hide a text on a click or tap.

In this article, we will explain displaying toggle box and configure the style.

To see toggle shortcode in action, you may check out the demo page.

Toggle Shortcode - demo

In this article

Displaying Toggle Box

To add toggle shortcode:

Add or edit an existing page.

In Visual Composer section, Click + button.

Toggle Shortcode - visual composer section

In Add Element pop-up screen, search for Toggle and click on it to be added to the page.

Toggle Shortcode - add element

When the shortcode is added, a new pop-up screen called Toggle Settings opens. It allows you to configure the shortcode settings.

Toggle Shortcode - Toggle Settings

Configure the settings as required. Other settings are explained in next sections.
Setting Description
Toggle Title The clickable toggle title.
Toggle Content The toggle content which is going to show when clicking on the title.
Click Save Changes and publish or update the page to check the result.

Adding an Extra Class Name

Extra Class Name field in the setting pop-up allows you to add an extra class name to the shortcode. It’s useful when you need to target the shortcode in a style sheet or JavaScript file.

You can read Adding custom CSS class to a shortcode article for further explanation.

Configuring the Layout and Styling

There are one more setting in Toggle Settings pop-up which allows you to configure the layout of the toggle.

To configure the layout:

In Visual Composer screen, click on the Pen button to open the Toggle Settings pop-up.

Toggle Shortcode - configure layout

Configure the style settings as required.
Style Can be Simple or Fancy
Add Icon For Title Only visible for Fancy Style and will makes it possible to add an icon in the title
Click on Save Changes button and update the page to check the result.

Change the Toggle Style

To add some more stylings to the toggle, we need to add a custom CSS class and write some CSS rules fore it.

In this practice, we assume that we want a yellow toggle background with blue font color for the title in fancy style as below:

Note: We assume that you are familiar with Inspecting elements. If you need more help please follow this article: Inspecting Elements
Drop a Toggle shortcode and add an Extra Class Name like “custom_toggle”
Add this CSS snippet to Jupiter -> Theme Options -> Advanced -> Custom CSS:

/* Change toggle title style */
.custom_toggle .mk-toggle-title {background: #ffff00 !important ; color: #0030ff !important; }

/* Change the toggle icon color */
.custom_toggle .mk-toggle-title .mk-svg-icon {fill: #0030ff !important;}

Hit Save Changes and refresh your page.
Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket