Collapse-O-Matic Shortcode

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

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

★★★★☆ (235) Active Installs: 50000+ Tested with: 6.3.2 PHP Version: 7.2

Included Shortcodes:

[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:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

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( ']]>', ']]&gt;', $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.php

Conclusion

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.

Collapse-O-Matic Shortcode

Collapse-O-Matic [expand] Shortcode

Parameters

Examples and Usage

PHP Function Code

Conclusion

Related Shortcodes

Comments

Leave a Reply Cancel reply