Toggle Shortcode

Updated on January 4, 2018

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


Displaying Toggle Box

To add toggle shortcode:

1Add or edit an existing page.

2In Visual Composer section, Click + button.

Toggle Shortcode - visual composer section

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

Toggle Shortcode - add element

4When 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

5Configure 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.
6Click 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:

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

Toggle Shortcode - configure layout

2Configure the style settings as required.
SettingDescription

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
3Click 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:

1Drop a Toggle shortcode and add an Extra Class Name like “custom_toggle”
2Add 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;}

3Hit Save Changes and refresh your page.
Did this answer your question?