**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 hereInstead 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.[faq-toggle2 title="Demo - click here " color="gray"]This is the content that is displayed[/faq-toggle2]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 USENow 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 methodInstead 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-support class="bobb" text="tutorial on how to add toggle shortcode function to WordPress http://bit.ly/14yUlUf" shortcdtext="Tweet this tutorial to other WordPress users"][faq-toggle2 title="Example with title text and default colour styling "]This is the content that is displayed[/faq-toggle2]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][faq-toggle2 title="Example with title text and gray colour styling " color="gray"]This is the content that is displayed[/faq-toggle2]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][faq-toggle2 title="Example with title text and white colour styling" color="white"]This is the content that is displayed[/faq-toggle2]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[dtwd-related-posts-sc title="More useful WordPress tutorials" count=5]
Comments: