Shortcode: Twitter Bootstrap Collapse aka Accordian

Twitter Bootstrap is a decent, intuitive, and powerful front-end framework for faster and easier web development. Bootstrap offers cross browser compatible 12-column responsive CSS which not only work nice for older browsers (like IE7) but also perfectly behave in Smartphone, mobile and tablet browsers. It also includes several JavaScript components that are usually required in a well interactive intermediate level web portal.

Talking about WordPress primarily as CMS, we want to manage everything from the backend. But, Twitter Bootstrap’s components are not developed to be used from a WordPress backend. We will try to overcome this gap by implementing WordPress shortcodes for all of the Twitter bootstrap components. Let’s start with the Collapse


[collapse_group id="optional_group_1" class="optional_class"]
	[collapse title="my heading1" id="optional_id" open="y/n"]some text[/collapse]
	[collapse title="my heading2" id="optional_id" open="y/n"]some text[/collapse]


add_shortcode("collapse", "collapse");
add_shortcode("collapse_group", "collapse_group");
function collapse_group( $atts, $content = null ) {  
    'id' => '',
    'class' => ''
    ), $atts));  
    $output  = '<div class="accordion '.$class.'"  ';
        $output .= 'id="'.$id.'"';
    $output .='>'.do_shortcode($content).'</div>';
    return $output;  

function collapse($atts, $content = null) {  
    'id' => '',
    'title' => '',
    ), $atts));  

    // autogenerate id to link the accordian title with contents.
        $id = 'accordian_item_'.rand(100,999);
    $output = '<div class="accordion-group">
        <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" 
        data-parent="#accordion2" href="#'.$id.'">'.$title.'</a>
         <div id="'.$id.'" class="accordion-body collapse '.($open == 'y' ? 'in' :'').'">
            <div class="accordion-inner">'.$content.'</div>
    return $output;

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>