Creating a Shortcode Toggle for WordPress

We are creating a website that has a FAQ section and I feel the best way to arrange questions and answers is with a toggle. Here is an example:

[toggle title=”Here is an example Question”]Here is the example answer. [/toggle]

I was looking around the web for some example code and I found this website. They give you all the code for your functions.php, stylesheet.css, and some jQuery to put in your header.php file, but it doesn’t work. It seems they left some code out of the functions.php code.

I looked at the code and made some changes. If you want to use the Toggle code on WPExplorer you need to use this code for your functions.php file.

function toggle_shortcode( $atts, $content = null )
{
	extract( shortcode_atts(
		array(
		'title' => 'Click To Open',
		'color' => ''
),
$atts ) );
return '<h3 class="trigger toggle-'.$color.'"><a href="#">'. $title .'</a></h3><div class="toggle_container">' . do_shortcode($content) . '</div>';
}
add_shortcode('toggle', 'toggle_shortcode');

This code add the trigger and color class to the h3 tag. This is needed for the Toggle to work with the jQuery. Enjoy!