Twitter Bootstrap Use Collapse in Custom Post Type

2 Views

I am using Bootstrap with WordPress and I want to implement the collapse functionality in the content for single pages of a specific custom post type.

I know I could create a shortcode, however, with hundereds of posts shortcodes are not going to be ideal. Is it possible to include collapse in the_content of the custom post type (custom-single.php). So when a user enters an .H2 with text below it .p it uses this for a collapse group.

Read More

So in the custom-single.php I wrap the_content in a custom div id 

 <div id="my-accordion"><?php the_content(); ?></div>

How I can associate the H2 and p with appropriate div classes for bootstrap. Is this possible? 

    <div class="accordion" id="accordion2">
        <div class="accordion-group">
          <div class="accordion-heading">
               <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
               Collapsible Group Item #1
               </a>
          </div>
          <div id="collapseOne" class="accordion-body collapse in">
              <div class="accordion-inner">
              Anim pariatur cliche...
          </div>
          </div>
      </div>

       <div class="accordion-heading">
           <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
           Collapsible Group Item #2
           </a>
       </div>
      <div id="collapseTwo" class="accordion-body collapse">
        <div class="accordion-inner">
         Anim pariatur cliche...
     </div>
   </div>
  </div>
</div>
Post Views: 2

Related posts

Leave a Reply

2 comments

  1. The script

    First you have to enqueue the script. We conditionally load it only for your custom post type and its archive(s).

    // in your functions.php
function wpse69274_enqueue_tbs_collapse()
{
    if (
        ! is_post_type_archive()
        AND 'YOUR_POST_TYPE' !== get_post_type()
    )
        return;

    wp_enqueue_script(
         'tbs-collapse'
        ,get_stylesheet_directory_url().'path/to/your/collapse.js';
        ,array( 'jquery' )
        ,filemtime( get_stylesheet_directory().'path/to/your/collapse.js' )
        ,true
    );
}
add_action( 'wp_enqueue_scripts', 'wpse69274_enqueue_tbs_collapse' );

    The MarkUp

    Now we need to add the proper MarkUp. The targets get marked by using the actual the_ID() of the currently looped post.

    <div class="container">
<div class="accordion" id="accordion">
    <?php
    global $wp_query;
    if ( have_posts() ) 
    {
        while( have_posts )
        {
            the_post();
            ?>
            <div class="accordion-group">
                <div class="accordion-heading">
                    <h2><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-<?php the_ID(); ?>">
                        <?php the_title(); ?>
                    </a></h2>
                </div>
                <div id="collapse-<?php the_ID(); ?>" class="accordion-body collapse in">
                    <div class="accordion-inner">
                        <?php
                        if ( is_singular()
                        {
                            the_content();
                        }
                        else
                        {
                            the_excerpt();
                        }
                        ?>
                    </div>
                </div>
            </div><!-- // .accordion-group -->
            <?php
        } // endwhile;
    } // endif;
    ?>
</div>
</div>