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.
Displaying Toggle Box
To add toggle shortcode:
| Setting | Description |
|---|---|
| Toggle Title | The clickable toggle title. |
| Toggle Content | The toggle content which is going to show when clicking on the title. |
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:
| Setting | Description |
|---|---|
| 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 |
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:
/* 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;}
