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].

This site uses cookies to offer you a better browsing experience. By browsing this website, you agree to our use of cookies.