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. For my first tutorial I will show you how I setup the “FAQ’s” or “Toggle” shortcodes which you can see on this page.

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!)

Toggle Live Demo

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:

//Toggle
function toggle_shortcode( $atts, $content = null )
{
extract( shortcode_atts(
array(
‘title’ => ‘Click To Open’,
‘color’ => ”
),
$atts ) );
return ‘<h3><a href=”#”>’. $title .’</a></h3><div>’ . do_shortcode($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. The Toggle Javascript I got from this awesome tutorial.

Javascript

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

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
    });

    }); // END <------ $(document).ready --------->
}); // END <------ jQuery(function($) ---------->

CSS

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

/*toggle*/
h3.trigger {
    margin: 0px !important;
    font-size: 18px;
    padding: 10px;
    padding-left: 30px;
    background-image: url('images/shortcodes/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/shortcodes/toggle-minus.png') !important;
    background-position: 10px center;
    background-repeat: no-repeat;
}
h3.toggle-white{
    background-color: #FFF;
}
h3.toggle-gray{
    background-color: #F5F5F5;
}
.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. :)