Shortcode for Twitter Bootstrap Collapse

Im trying to create shortcodes for Twitter Bootstrap Collapse.

This is what Im trying to achieve:

Read More
[collapse-group]
  [collapse accordion="#accordionOne" title="my heading1"]some text[/collapse]
  [collapse accordion="#accordionTwo" title="my heading2"]some more text[/collapse]
[/collapse-group]

So for example ‘my heading1’ would show and ‘some more text’ would be collapsible.

Here is the code Im using, the last shortcode [collapse] is causing a server error on my local install.

function collapse-group( $atts, $content = null ) {  
return '<div class="accordion" id="accordion2">"'.$content.'"</div>';  
}  
add_shortcode("collapse-group", "collapse-group");

function collapse($atts, $content = null) {  
    extract(shortcode_atts(array(  
    'accordion' => '',
    'title' => ''  
    ), $atts));  

return '<div class="accordion-group">
        <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" 
        data-parent="#accordion2" href="'.$accordion.'">"'.$title.'"</a>
        </div>
         <div id="'.$accordion.'" class="accordion-body collapse in">
            <div class="accordion-inner">"'.$content.'"</div>
         </div>
        </div>';  
}  

add_shortcode("collapse", "collapse");

I know there are plugins but I’d prefer to have this custom made for this specific instance so I don’t have to rely on a plugin with all sorts of other bloat. Im hoping an answer to this question would be useful to others.

Related posts

Leave a Reply

1 comment