Creating A Toggle Shortcode For WordPress FAQ’s Page

After finally releasing my first theme on Themeforest, the “Classy WordPress Business Theme”, I’ve decided to share some tutorials and the code for how I created some of the awesome features in the theme.

I won’t walk you through each and every step explaining every bit of code because its very easy to figure out, instead I’ll provide you with everything you need to cut/paste the shortcodes into your own theme (even better!)

The Toggle Shortcode

Creating the Toggle shortcode is very simple. All we need to do is add a shortcode function to our functions.php file that has 2 options: title and color. This way when you add the shortcode you can choose the title that you can click on for the toggle effect and the color so you can add various color options to your toggle, like you can see in my demo link above where I have added a white and gray style so people can create this alternating color effect.

Simply copy and paste the shortcode to your functions.php file:

// Register the toggle shortcode
function toggle_shortcode( $atts, $content = null ) {
	
	extract( shortcode_atts( array(
		'title' => 'Click To Open',
		'color' => ''
	), $atts ) );

	return '<h3 class="toggle-trigger"><a href="#">' . esc_html( $title  ) . '</a></h3><div class="toggle_container">' . do_shortcode( wp_kses_post( $content ) ) . '</div>';

}
add_shortcode( 'toggle', 'toggle_shortcode' );

The Toggle Javascript, CSS & Images

Below is all the code I used to create the toggles on my Premium WordPress Theme if you want to achieve the same look.

Javascript

Here is the Javascript. You can put this in your custom.js file or in the head of your theme.

Important: make sure you are already including the jQuery library as it is needed for the rest of the js to work 😉

jQuery( function( $ ) {
	$( document ).ready(function() {
		$( ".toggle_container" ).hide();
		$( ".toggle-trigger" ).click( function() {
			$(this).toggleClass( "active" ).next().slideToggle( "normal" );
			return false;
		} );
	} );
} );

CSS

Here is the CSS. Simply Place In Your style.css file

/*toggle*/
.toggle-trigger {
	margin: 0px !important;
	font-size: 18px;
	padding: 10px;
	padding-left: 30px;
	background-color: #F5F5F5;
	background-image: url('images/shortcodes/toggle-plus.png');
	background-position: 10px center;
	background-repeat: no-repeat;
}

.toggle-trigger a {
	color: #333;
	text-decoration: none;
	display: block;
}

.toggle-trigger a:hover {
	color: #0489B7;
	text-decoration: underline;
}

.toggle-trigger.active{
	background-image: url('images/shortcodes/toggle-minus.png') !important;
	background-position: 10px center;
	background-repeat: no-repeat;
}

.toggle_container {
	overflow: hidden;
	padding: 20px 10px;
}

Images

Below are the two images for the shortcode. Simply right-click and hit “save image as” to save the images to your theme’s images folder.

Using The Shortcode

Now that you have added all the code required for the shortcode you can easily insert your toggles to your site just like this:

[toggle title="Your Toggle Title" color="white"]Toggle Content[/toggle]

Too Lazy? Get The Theme!

Click on the picture below to checkout my premium theme and buy it. 🙂