Below, you’ll find a detailed guide on how to add the Collapse-O-Matic 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 Collapse-O-Matic Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the Collapse-O-Matic Plugin and the shortcodes it provides:
"Collapse-O-Matic is a dynamic jQuery plugin for WordPress. It allows users to create interactive, collapsible content sections, enhancing site navigability and user experience."
- [expand]
Collapse-O-Matic [expand] Shortcode
The Collapse-O-Matic plugin shortcode enables dynamic content display in WordPress. It allows the creation of collapsible text areas, enhancing user interaction. This shortcode adds a collapsible/expandable section to your page. It uses various parameters to customize the section, like title, content, CSS classes, and animation effects. The content can be static text or another shortcode. It also supports nested collapsible sections, allowing for complex layouts. The expand shortcode is versatile, making your web pages more interactive and organized.
Shortcode: [expand]
Parameters
Here is a list of all possible expand shortcode parameters and attributes:
title– Defines the title of the collapsible section.cid– Identifier for the collapse commander plugin.template_id– Specifies the template used for the collapsible section.swaptitle– Alternate title when the section is collapsed.alt– Alternative text for the title.swapalt– Alternative text for the swap title.notitle– If set, the title will not be displayed.id– Unique identifier for the collapsible section.tag– HTML tag to wrap the title in.trigclass– CSS class for the trigger element.targtag– HTML tag to wrap the target content in.targclass– CSS class for the target element.targpos– Position of the target element.trigpos– Position of the trigger element.rel– Relation attribute for the trigger element.group– Group name for related collapsible sections.togglegroup– Group name for toggleable collapsible sections.expanded– If set, the section will be expanded on load.excerpt– Short summary displayed when the section is collapsed.swapexcerpt– Alternate excerpt when the section is expanded.excerptpos– Position of the excerpt.excerpttag– HTML tag to wrap the excerpt in.excerptclass– CSS class for the excerpt element.findme– If set, the section will be automatically scrolled to.scrollonclose– If set, the page will scroll to the trigger on close.startwrap– HTML to wrap around the start of the content.endwrap– HTML to wrap around the end of the content.elwraptag– HTML tag to wrap the entire element in.elwrapclass– CSS class for the wrapper element.filter– If set, the content will be filtered through ‘the_content’.tabindex– Tab order of the collapsible section.animation_effect– Animation effect for expanding and collapsing.duration– Duration of the animation effect.orderby– Order of the collapsible sections.order– Ascending or descending order of the sections.
Examples and Usage
Basic example – A simple use of the shortcode to expand a section with a specific title.
[expand title="Click to expand!"]Your content goes here...[/expand]Advanced examples
Using the shortcode to display an expandable section with a unique ID, a specific CSS class for the trigger, and a different CSS class for the target content. This allows for custom styling of both the trigger and the content area.
[expand id="unique1" trigclass="my-trigger-class" targclass="my-content-class" title="Click to expand!"]Your content goes here...[/expand]Using the shortcode to display an expandable section with a swapped title. When the section is expanded, the title changes to the text specified in the ‘swaptitle’ attribute.
[expand title="Click to expand!" swaptitle="Click to collapse!"]Your content goes here...[/expand]Using the shortcode to display an expandable section with an excerpt. The excerpt is displayed below the trigger and above the main content.
[expand title="Click to expand!" excerpt="This is an excerpt."]Your content goes here...[/expand]Using the shortcode to display an expandable section with a specified animation effect and duration. The ‘animation_effect’ attribute specifies the type of animation, and the ‘duration’ attribute specifies the duration of the animation in milliseconds.
[expand title="Click to expand!" animation_effect="slide" duration="500"]Your content goes here...[/expand]PHP Function Code
In case you have difficulties debugging what causing issues with [expand] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('expand', array($this, 'shortcode'));Shortcode PHP function:
function shortcode($atts, $content = null){
$options = $this->options;
if( !empty($this->options['script_check']) ){
wp_enqueue_script('collapseomatic-js');
}
if( !empty($this->options['css_check'])){
wp_enqueue_style( 'collapscore-css' );
if ($this->options['style'] !== 'none') {
wp_enqueue_style( 'collapseomatic-css' );
}
}
//find a random number, if no id is assigned
$ran = uniqid();
extract(shortcode_atts(array(
'title' => '',
'cid' => $options['cid'],
'template_id' => '',
'swaptitle' => '',
'alt' => '',
'swapalt' => '',
'notitle' => $options['notitle'],
'id' => 'id'.$ran,
'tag' => $options['tag'],
'trigclass' => $options['trigclass'],
'targtag' => $options['targtag'],
'targclass' => $options['targclass'],
'targpos' => '',
'trigpos' => 'above',
'rel' => '',
'group' => '',
'togglegroup' => '',
'expanded' => '',
'excerpt' => '',
'swapexcerpt' => false,
'excerptpos' => 'below-trigger',
'excerpttag' => 'div',
'excerptclass' => '',
'findme' => '',
'scrollonclose' => '',
'startwrap' => '',
'endwrap' => '',
'elwraptag' => '',
'elwrapclass' => '',
'filter' => $options['filter_content'],
'tabindex' => $options['tabindex'],
'animation_effect' => '',
'duration' => '',
'orderby' => '',
'order' => ''
), $atts, 'expand'));
//collapse commander
if( !empty($cid) && is_plugin_active( 'collapse-commander/collapse-commander.php') ){
$meta_values = WP_CollapseCommander::meta_grabber($cid, $orderby, $order);
extract(shortcode_atts($meta_values, $atts));
}
if(!empty($triggertext)){
$title = $triggertext;
}
if(!empty($highlander) && !empty($rel)){
$rel .= '-highlander';
}
//content filtering
if(empty($filter) || $filter == 'false'){
$content = do_shortcode($content);
}
else{
$content = apply_filters( 'the_content', $content );
$content = str_replace( ']]>', ']]>', $content );
}
if( !empty($cid) && get_edit_post_link($cid) ){
$content .= '<div class="com_edit_link"><a class="post-edit-link" href="'.get_edit_post_link($cid).'">'.__('Edit').'</a></div>';
}
if( !empty($sub_cids) ){
foreach($sub_cids as $sub_cid){
$args = array('cid' => $sub_cid);
$content .= $this->shortcode($args);
}
}
//id does not allow spaces
$id = preg_replace('/\s+/', '_', $id);
$ewo = '';
$ewc = '';
//id does not allow spaces
$id = preg_replace('/\s+/', '_', $id);
//placeholders
$placeholder_arr = array('%(%', '%)%', '%{%', '%}%');
$swapout_arr = array('<', '>', '[', ']');
$title = do_shortcode(str_replace($placeholder_arr, $swapout_arr, $title));
if($swaptitle){
$swaptitle = do_shortcode(str_replace($placeholder_arr, $swapout_arr, $swaptitle));
}
if($startwrap){
$startwrap = do_shortcode(str_replace($placeholder_arr, $swapout_arr, $startwrap));
}
if($endwrap){
$endwrap = do_shortcode(str_replace($placeholder_arr, $swapout_arr, $endwrap));
}
//need to check for a few versions, because of new option setting. can be removed after a few revisiosn.
if(empty($targtag)){
$targtag = 'div';
}
if(!empty($elwraptag)){
$ewclass = '';
if($elwrapclass){
$ewclass = 'class="'.esc_attr($elwrapclass).'"';
}
$ewo = '<'. esc_attr( $elwraptag ) .' '.$ewclass.'>';
$ewc = '</'. esc_attr( $elwraptag ) .'>';
}
$eDiv = '';
if($content){
$inline_class = '';
$collapse_class = 'collapseomatic_content ';
if($targpos == 'inline'){
$inline_class = 'colomat-inline ';
$collapse_class = 'collapseomatic_content_inline ';
}
$eDiv = '<'. esc_attr( $targtag ) .' id="target-'.$id.'" class="'.esc_attr($collapse_class.$inline_class.$targclass).'">'. $content .'</'. esc_attr( $targtag ) .'>';
}
if($excerpt){
$excerpt = str_replace($placeholder_arr, $swapout_arr, $excerpt);
$excerpt = do_shortcode($excerpt);
$excerpt = apply_filters( 'colomat_excerpt', $excerpt );
if($targpos == 'inline'){
$excerpt .= $eDiv;
$eDiv = '';
}
if($excerptpos == 'above-trigger'){
$nibble = '<'. esc_attr( $excerpttag ) .' id="excerpt-'.esc_attr($id).'" class="'.esc_attr($excerptclass).'">' . $excerpt . '</'. esc_attr( $excerpttag ) .'>';
}
else{
$nibble = '<'. esc_attr( $excerpttag ) .' id="excerpt-'.esc_attr($id).'" class="collapseomatic_excerpt '.esc_attr($excerptclass).'">'. esc_attr( $excerpt ) .'</'. esc_attr( $excerpttag ) .'>';
}
//swapexcerpt
if($swapexcerpt !== false){
$swapexcerpt = str_replace($placeholder_arr, $swapout_arr, $swapexcerpt);
$swapexcerpt = do_shortcode($swapexcerpt);
$swapexcerpt = apply_filters( 'colomat_swapexcerpt', $swapexcerpt );
$nibble .= '<'. esc_attr( $excerpttag ) .' id="swapexcerpt-'.esc_attr($id).'" style="display:none;">' . $swapexcerpt . '</'. esc_attr( $excerpttag ) .'>';
}
}
$altatt = '';
if(!empty($alt)){
$altatt = 'alt="'.esc_attr($alt).'" title="'.esc_attr($alt).'"';
}
else if( empty($notitle) ){
$altatt = 'title="'.esc_attr($title).'"';
}
$relatt = '';
if(!empty($rel)){
$relatt = 'rel="'.esc_attr($rel).'"';
}
$groupatt = '';
//legacy
if($group && !$togglegroup){
$togglegroup = $group;
}
if($togglegroup){
$groupatt = 'data-togglegroup="'.esc_attr($togglegroup).'"';
}
$inexatt = '';
//var_dump($tabindex);
if(!empty($tabindex) || $tabindex == 0 ){
$inexatt = 'tabindex="'.esc_attr($tabindex).'"';
}
if($expanded && $expanded != 'false'){
$trigclass .= ' colomat-close';
}
$anchor = '';
if($findme){
$trigclass .= ' find-me';
$offset = '';
if($findme != 'true' && $findme != 'auto'){
$offset = $findme;
}
//$anchor = '<input type="hidden" id="find-'.$id.'" name="'.$offset.'"/>';
$anchor = 'data-findme="'.$offset.'"';
}
//effect
$effatt = '';
if($animation_effect){
$effatt = 'data-animation_effect="'.esc_attr($animation_effect).'"';
}
//duration
$duratt = '';
if($duration){
$duratt = 'data-duration="'.esc_attr($duration).'"';
}
$closeanchor = '';
if($scrollonclose && (is_numeric($scrollonclose) || $scrollonclose == 0)){
$trigclass .= ' scroll-to-trigger';
$closeanchor = '<input type="hidden" id="scrollonclose-'.esc_attr($id).'" name="'.esc_attr($scrollonclose).'"/>';
}
//deal with image from collapse-commander
if( !empty($trigtype) && $trigtype == 'image' && !empty($triggerimage) && strtolower($tag) == 'img' ){
$imageclass = 'collapseomatic noarrow' . esc_attr($trigclass);
$image_atts = array( 'id' => $id, 'class' => $imageclass, 'alt' => $alt );
if(!$notitle){
$image_atts['title'] = $alt;
}
$link = $closeanchor.wp_get_attachment_image( $triggerimage, 'full', false, $image_atts );
}
else{
if(!empty($trigtype) && $trigtype == 'image' && !empty($triggerimage)){
$title = wp_get_attachment_image( $triggerimage, 'full' );
}
$link = $closeanchor.'<'. esc_attr($tag) .' class="collapseomatic '.esc_attr($trigclass).'" id="'.esc_attr($id).'" '.$relatt.' '.$inexatt.' '.$altatt.' '.$anchor.' '.$groupatt.' '.$effatt.' '.$duratt.'>'.wp_kses_post($startwrap.$title.$endwrap).'</'. esc_attr($tag) .'>';
}
//swap image
if( !empty($trigtype) && $trigtype == 'image' && !empty($swapimage) && strtolower($tag) == 'img' ){
$link .= wp_get_attachment_image( $swapimage, 'full', false, array( 'id' => 'swap-'.$id, 'class' => 'colomat-swap', 'alt' => $swapalt, 'style' => 'display:none;' ) );
}
else{
if(!empty($trigtype) && $trigtype == 'image' && !empty($swapimage)){
$swaptitle = wp_get_attachment_image( $swapimage, 'full' );
}
}
//swap title
if($swaptitle){
$swapalt_attr = '';
if(!empty($swapalt)){
$swapalt_attr = "alt='".esc_attr($swapalt)."'";
}
$link .= "<". esc_attr($tag) ." id='swap-".esc_attr($id)."' ".esc_attr($swapalt_attr)." class='colomat-swap' style='display:none;'>".wp_kses_post($startwrap.$swaptitle.$endwrap)."</". esc_attr($tag) .">";
}
if($excerpt){
if($excerptpos == 'above-trigger'){
if($trigpos == 'below'){
$retStr = $ewo.$eDiv.$nibble.$link.$ewc;
}
else{
$retStr = $ewo.$nibble.$link.$eDiv.$ewc;
}
}
else if($excerptpos == 'below-trigger'){
if($trigpos == 'below'){
$retStr = $ewo.$eDiv.$link.$nibble.$ewc;
}
else{
$retStr = $ewo.$link.$nibble.$eDiv.$ewc;
}
}
else{
if($trigpos == 'below'){
$retStr = $ewo.$eDiv.$link.$nibble.$ewc;
}
else{
$retStr = $ewo.$link.$eDiv.$nibble.$ewc;
}
}
}
else{
if($trigpos == 'below'){
$retStr = $ewo.$eDiv.$link.$ewc;
}
else{
$retStr = $ewo.$link.$eDiv.$ewc;
}
}
return $retStr;
}
Code file location:
jquery-collapse-o-matic/jquery-collapse-o-matic/collapse-o-matic.phpConclusion
Now that you’ve learned how to embed the Collapse-O-Matic 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