WP Tutorials
Toggle Button Shortcode for WordPress Site
I’m showing how you will create a simple toggle button effect with PHP & JQuery for your WordPress site. I am making the shortcode because I can easily add this button at any pages/posts or custom post type content.
PHP
Open the functions.php file of your active theme and add this code at end of the file.
add_shortcode( 'toggle_button', 'tbtn_toggle_button_shortcode' );
function tbtn_toggle_button_shortcode( $atts, $content ) {
$defaults = array(
'title' => '',
);
$atts = shortcode_atts( $defaults, $atts, 'toggle_button' );
$btn_html = '';
if( ! empty( $atts['title'] ) ) {
$btn_html .= '<div class="toggle tie-sc-close">' . "\n";
$btn_html .= '<h3 class="toggle-head">' . esc_attr( trim( $atts['title'] ) ) . ' <span class="fa fa-angle-down" aria-hidden="true"></span></h3>'. "\n";
$btn_html .= '<div class="toggle-content">' . wp_kses_post( $content ) . '</div>' . "\n";
$btn_html .= '</div>' . "\n";
}
return $btn_html;
}
add_action( 'wp_enqueue_scripts', 'tbtn_enqueue_script' );
function tbtn_enqueue_script() {
wp_enqueue_style( 'toggle-button-css', get_stylesheet_directory_uri() . '/css/toggle-button.css', array(), time() );
wp_enqueue_script( 'toggle-button-js', get_stylesheet_directory_uri() . '/js/toggle-button.js', array(), time(), true );
}
CSS/STYLE
Create a css (case-sensitive) folder if it is not in your theme folder. After this create a small CSS file “toggle-button.css” and save inside the css folder.
.toggle {
border: 1px solid #3b5998;
border-radius: 3px;
margin-bottom: 35px;
position: relative;
}
.toggle-head {
background-color: #3b5998;
color: #fff;
font-size: 16px;
}
.toggle h3 {
cursor: pointer;
font-weight: normal;
font-size: 14px;
padding: 15px;
margin: 0;
}
.toggle h3 span.fa {
float: right;
font-size: 16px;
width: 16px;
height: 16px;
text-align: center;
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.toggle.tie-sc-open h3 span.fa {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.toggle.tie-sc-close .toggle-content {
display: none;
}
.toggle .toggle-content {
padding: 25px;
}
JavaScript
We need small JS script for toggle effect. Create a “js” (case-sensitive) folder if it is not available inside your theme folder. Now create a file “toggle-button.js” and save it into that js folder. Here is the code of that JS file.
jQuery(document).ready(function(){
/**
* Toggle Shortcode
*/
jQuery('h3.toggle-head').on('click', function(){
var $thisElement = jQuery(this).parent();
$thisElement.find('div.toggle-content').slideToggle();
$thisElement.toggleClass('tie-sc-open tie-sc-close');
});
});
Now toggle button shortcode [toggle_button] is ready. Navigate to your dashboard, edit a page/post or any CPT content and enter the shortcode like this way [toggle_button title=”ENTER TITLE”]ENTER CONTENT[/toggle_button].
