Age of Article Warning:
This article was originally published 42 months ago. The tips and techniques explained may be outdated, or information may longer be applicable. Please consider this when viewing the below content.

**update:
due to request, I have released a premium WordPress toggle plugin, that allows you to easily add the toggle shortcode function, plus a little bonus markup: View plugins here

Instead of adding another WordPress plugin, you can use a simple jQuery code with a shortcode function, to create a simple and easy to use toggle for your extra clickable content such as what you would use on a FAQs page.

Demo - click here

This is the content that is displayed

To do this we add a shortcode function to our childtheme’s functions.php file, add a small javascript file to our site, link to it in the header.php file, add a couple of small button images for opening and closing the toggle, and then add some styling for the toggle to our css stylesheet.

First let’s start with the WordPress toggle function code. Add this toggle function to your WordPress childtheme’s functions.php file.

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

Next step is to create the javascript file and upload to your website. If you don’t already have this folder, setup a folder named “js” inside your “wp-content/themes/childtheme-name” and then add a javascript file called faq-toggle.js with the following code in it.

jQuery(function($){
    $(document).ready(function(){
         $(".toggle_container").hide();
         $("h3.trigger").click(function(){
        $(this).toggleClass("active").next().slideToggle("normal");
        return false; //Prevent the browser jump to the link anchor
    });
    });
});

***updated 26/9/2013 based on suggestion thanks to Wouter Tinbergen (see in the comments below)
old method – DO NOT USE
Now we need to call this javascript file in the header.php of your WordPress website, so we need to link to the faq-toggle.js file. An important note is that this javascript file must be loaded after jQuery has been loaded, so add this link into the header, after the link to jQuery.

<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/faq-toggle.js"></script>

***end old method
Instead of hardcoding the link to the toggle javascript above into the header file, as Wouter pointed out it is better to enqueue scripts in WordPress, so consider adding the following function to enqueue the script into the header, automatically adding it after the jQuery has been loaded. This goes into your childtheme’s functions.php file:

//enqueue scripts added to header
function dtwd_scripts_enqueue() {
	wp_enqueue_script(
		'faq-toggle', get_stylesheet_directory_uri() . '/js/faq-toggle.js', array('jquery')
	);
}
add_action( 'wp_enqueue_scripts', 'dtwd_scripts_enqueue' );

Next up you can add a couple of small transparent PNG or transparent GIF images to your images folder, which we have used to show that the text can be clicked to open the toggle (+ sign) and to close the toggle (- sign)

Then we add CSS styling to the toggle, by adding to our childtheme’s stylesheet. The code below can be adapted to your style requirements.

h3.trigger {
    margin: 0px !important;
	margin-top: -15px !important;
	font-weight:400;
    font-size: 14px;
    padding: 10px;
    padding-left: 30px;
    background-image: url('images/toggle-plus.png');
    background-position: 10px center;
    background-repeat: no-repeat;
}
h3.trigger a {
    color: #333;
    text-decoration: none;
    display: block;
}
h3.trigger a:hover {
    color: #0489B7;
    text-decoration: underline;
}
h3.active{
    background-image: url('images/toggle-minus.png') !important;
    background-position: 10px center;
    background-repeat: no-repeat;
}
h3.toggle-white{
    background-color: #FFF;
}
h3.toggle-gray{
    background-color: #F5F5F5;
}
h3.toggle-dark{
	background-color:#383838;
}
h3.toggle-dark a{
	color:#fff;
}
.toggle_container {
    overflow: hidden;
    padding: 20px 40px;
}

Now the fun begins as we put this new shortcode function to use. The following examples show how to use this toggle shortcode in your WordPress pages.

Tweet this tutorial to other WordPress users

 

Example with title text and default colour styling

This is the content that is displayed

shortcode text used:

[text][faq-toggle title="Example with title text and default colour styling "]This is the content that is displayed
[/faq-toggle][/text]

Example with title text and gray colour styling

This is the content that is displayed

shortcode text used:

[text][faq-toggle title="Example with title text and gray colour styling " color="gray"]This is the content that is displayed
[/faq-toggle][/text]

Example with title text and white colour styling

This is the content that is displayed

shortcode text used:

[text][faq-toggle title="Example with title text and white colour styling" color="white"]This is the content that is displayed
[/faq-toggle][/text]

This tutorial has been adapted from an article on WPExplorer so credit to them: www.wpexplorer.com/wordpress-toggle-shortcode

Create toggle shortcode for WordPress using jQuery was last modified: September 6th, 2016 by David Tiong
Create toggle shortcode for WordPress using jQuery