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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
.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.
|
1 2 3 4 5 6 7 8 9 10 |
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].
Leave a Reply