Below, you’ll find a detailed guide on how to add the azurecurve Toggle Show/Hide Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the azurecurve Toggle Show/Hide Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the azurecurve Toggle Show/Hide Plugin and the shortcodes it provides:
"azurecurve Toggle Show/Hide is a dynamic WordPress plugin that enables users to easily manage the visibility of their website content. It offers seamless show or hide options for a clutter-free interface."
- [toggle]
azurecurve Toggle Show/Hide [toggle] Shortcode
The azurecurve-toggle-showhide plugin shortcode provides a collapsible/expandable content box in WordPress. The shortcode uses various attributes to customize the appearance and behavior of the content box. It allows for customization of title, title color, font, font size, font weight, border, background color, text color, and more. The content within the box can be hidden or shown based on the ‘expand’ attribute. It also supports shortcodes within the title and content, providing greater flexibility. The generated content box can be enclosed within a div with a specified width, allowing for further control over its placement and appearance on the page.
Shortcode: [toggle]
Parameters
Here is a list of all possible toggle shortcode parameters and attributes:
title– Set the title of the toggle sectiontitle_color– Change the color of the titletitle_font– Set the font of the titletitle_font_size– Adjust the size of the title fonttitle_font_weight– Set the thickness of the title fontexpand– Control whether the section is expanded or notborder– Set the border style of the sectionbgtitle– Change the background color of the titlebgtext– Alter the background color of the texttext_color– Change the color of the texttext_font– Set the font of the texttext_font_size– Adjust the size of the text fonttext_font_weight– Set the thickness of the text fontdisable_image– Enable or disable the background imagewidth– Set the width of the section
Examples and Usage
Basic example – A simple usage of the toggle shortcode to display a hidden content section. The content will be hidden until the user clicks on the title, then the content will be revealed.
[toggle title="Click to reveal"] Hidden content goes here. [/toggle]Advanced examples
Using the shortcode to create a styled toggle section. The title is styled with a custom font, size, and color. The content is also styled with a custom font, size, and color. Additionally, the toggle section has a custom border and background color for both the title and content sections.
[toggle title="Click to reveal" title_color="#000000" title_font="Arial" title_font_size="20px" title_font_weight="bold" border="1px solid #cccccc" bgtitle="#ffffff" bgtext="#f9f9f9" text_color="#333333" text_font="Arial" text_font_size="16px" text_font_weight="normal"] Hidden content goes here. [/toggle]Using the shortcode to create a toggle section that is expanded by default. The ‘expand’ parameter is set to 1, which means the content will be visible when the page loads.
[toggle title="Click to hide" expand=1] Visible content goes here. [/toggle]Using the shortcode to create a toggle section with a custom width. The ‘width’ parameter is set to a specific pixel value, which sets the width of the toggle section.
[toggle title="Click to reveal" width="500px"] Hidden content goes here. [/toggle]PHP Function Code
In case you have difficulties debugging what causing issues with [toggle] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'toggle', 'azc_toggle_show_hide' );Shortcode PHP function:
function azc_toggle_show_hide($atts, $content = null) {
$options = get_option( 'azc_tsh_options' );
if ($options['use_multisite'] == 1){
$options = get_site_option( 'azc_tsh_options' );
}
if (strlen(stripslashes($options['title'])) == 0){
$title = 'Click to show/hide';
}else{
$title = $options['title'];
}
// extract attributes from shortcode
extract(shortcode_atts(array(
'title' => stripslashes($title),
'title_color' => stripslashes($options['title_color']),
'title_font' => stripslashes($options['title_font']),
'title_font_size' => stripslashes($options['title_font_size']),
'title_font_weight' => stripslashes($options['title_font_weight']),
'expand' => 0,
'border' => stripslashes($options['border']),
'bgtitle' => stripslashes($options['bg_title']),
'bgtext' => stripslashes($options['bg_text']),
'text_color' => stripslashes($options['text_color']),
'text_font' => stripslashes($options['text_font']),
'text_font_size' => stripslashes($options['text_font_size']),
'text_font_weight' => stripslashes($options['text_font_weight']),
'disable_image' => $options['disable_image'],
'width' => stripslashes($options['width']),
), $atts));
$border_style='';
$link_style='';
if($expand == 1){
$expand = '_open';
$expand_active = $expand.'_active';
}else{
$expand = '';
$expand_active = '';
}
$background_title = '';
$background_text = '';
if (strlen($border) > 0){ $border = "border: $border; "; }
if (strlen($title_color) > 0){ $title_color = "color: $title_color; "; }
if (strlen($title_font) > 0){ $title_font = "font-family: $title_font; "; }
if (strlen($title_font_size) > 0){ $title_font_size = "font-size: $title_font_size; "; }
if (strlen($title_font_weight) > 0){ $title_font_weight = "font-weight: $title_font_weight; "; }
if (strlen($bgtitle) > 0){ $background_title = "background-color: $bgtitle; "; }
if (strlen($bgtext) > 0){ $background_text = "background-color: $bgtext; "; }
if (strlen($text_color) > 0){ $text_color = "color: $text_color; "; }
if (strlen($text_font) > 0){ $text_font = "font-family: $text_font; "; }
if (strlen($text_font_size) > 0){ $text_font_size = "font-size: $text_font_size; "; }
if (strlen($text_font_weight) > 0){ $text_font_weight = "font-weight: $text_font_weight; "; }
if ($disable_image == 1){
$disable_image = 'background-image: none !important; padding-left: 10px; ';
}else{
$disable_image = '';
}
if (strlen($width) > 0){ $width = "margin: auto; width: $width; "; }
if($options['allow_shortcodes'] == 1){
$title = do_shortcode($title);
$content = do_shortcode($content);
}
$title_tag = stripslashes($options['title_tag']);
if ( strlen ( $title_tag ) == 0){ $title_tag = 'h3'; }
$output = "<$title_tag class='azc_tsh_toggle$expand_active' style='$border$background_title$disable_image'><a href='#' style='$title_color$title_font$title_font_size$title_font_weight'>$title</a></$title_tag>";
$output .= "<div class='azc_tsh_toggle_container$expand' style='$border$background_text$text_color$text_font$text_font_size$text_font_weight'>$content</div>";
if (strlen($width) > 0){
$output = '<div style="'.$width.'">'.$output.'</div>';
}
return $output;
}
Code file location:
azurecurve-toggle-showhide/azurecurve-toggle-showhide/azurecurve-toggle-showhide.phpConclusion
Now that you’ve learned how to embed the azurecurve Toggle Show/Hide Plugin shortcode, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply