Support » Plugin: Collapse-O-Matic » [Plugin: jQuery Collapse-O-Matic] Roll your own Elements ideas

  • Having lots of fun with the Jquery-collapse-o-matic plugin, and I wanted to share a few uses I’ve put it to.

    1. Collapsible comments
    Replace comment area with something like the following:

    <span id="commentCollapse" class="collapseomatic">
    				if ( comments_open() ) :
    				  comments_popup_link('Leave a comment ↓', '1 comment ↓', '% comments ↓');
    				<span id="swap-commentCollapse" class="collapseomatic" style="display: none;">Collapse ↑</span>
    				<?php edit_post_link('Edit →', '| ', '' ); ?></p>
    				<div class="content_collapse_wrapper"><div id="target-commentCollapse" class="collapseomatic_content force_content_collapse">
    				<?php comments_template( '', true ); ?>

    CSS code to remove arrow image

    #commentCollapse.collapseomatic {
    	background: none !important;
    	color: #852D2B;

    2. Collapsible post titles in a list, with thumbnails
    PHP code for a custom template page, pulled from a category matching the page name. Put after main page content loop. Formatting changes if a thumbnail is included.

    		$args = array(
    		'category_name' => get_permalink(), //category displayed is the SAME as the page link
    		'orderby' => 'the_time', //what to order it by
    		'order' => 'DESC' //order descending
    		$my_query = new WP_Query($args); //create a new wordpress query
    		if ($my_query->have_posts()) : while ($my_query->have_posts()) : //get all posts that match args, defines above
            	<div id="post-list-item">
    				<?php //check if the post has a thumbnail
                    if(has_post_thumbnail()) :?>
                    <div class="has-thumb"> <!--create a has thumb div modifying how the background of the collapse-o-matic works-->
                    <?php else :?>
                    <?php endif;?>
                        <p class="event-date"><?php the_time('F j, Y'); ?></p>
                        <h4 class="collapseomatic" title="<?php the_title(); ?>" id="<?php the_ID(); ?>"><?php echo get_the_post_thumbnail($page->ID, 'thumbnail'); ?><?php the_title(); ?></h4> <!-- Returns title with Collapse-o-matic formatting -->
                        <div class="content_collapse_wrapper"><div id="target-<?php the_ID(); ?>" class="collapseomatic_content force_content_collapse"><?php the_excerpt(); ?></div></div> <!-- Returns post content in collapse-o-matic div -->
                    <?php //check if the post has a thumbnail
                    if(has_post_thumbnail()) :?>
                    </div><!--end has-thumb-->
                    <?php else :?>
                    <?php endif;?>
                <div class="event-divider clear"></div> <!-- thin line divider -->
    			</div><!--end post item-->
    		<?php endwhile; else: ?>
    		<p><?php _e('No posts listed'); ?></p>
    		<?php endif; ?>

    And the CSS…

    .collapseomatic {
    	background-position: 0px 8px;
    .has-thumb .collapseomatic {
    	background-position: 58px 8px;
    h4.collapseomatic {
            margin: 0;
            padding:  0 0 0 22px;
    .has-thumb h4.collapseomatic {
    	padding: 0 0 0 0px;
    .collapseomatic_content  {
    	margin: 0px;
    	margin-left: 0 !important;
    	padding: 0px;
    	background: #ffffff;
    	border: 0px;
    .has-thumb .collapseomatic_content {
    	margin: 5px 0 10px 0 !important;
    #post-list-item .collapseomatic img.attachment-thumbnail {
    	height: 50px !important;
    	width: 50px !important;
    	padding: 0 10px 0 0 !important;

    3. Add a custom excerpt area
    First, using the more fields plugin, add a custom field with the value “nocollapseExcerpt”.

    Then, add this PHP code after the collapseomatic title and before the collapseomatic content used (post content or excerpt) on the template.

    			$NCExcerpt_values = get_post_custom_values('nocollapseExcerpt'); //Returns custom field data for the nocollapseExcerpt key for post
    			foreach ( $NCExcerpt_values as $key => $value ) { ?>
    			<p><?php echo "$value"; //Print the value of the key nocollapseExcerpt ?></p>
    			<?php } ?>

    4. Start with content expanded

    Add the class colomat-close to your collapseomatic title, like:

    <h4 class="collapseomatic colomat-close" title="<?php the_title(); ?>" id="<?php the_ID(); ?>"><?php echo get_the_post_thumbnail($page->ID, 'thumbnail'); ?><?php the_title(); ?></h4> <!-- Returns title with Collapse-o-matic formatting, with EXPAND BY DEFAULT (colomat-close) -->

    Have fun!

Viewing 15 replies - 16 through 30 (of 44 total)
  • terryago



    Sure. The <b> etc tags will only show up as title text when you hover if you’re using the shortcodes. Using a simple “roll your own elements” will work fine. Example below (switch both instances of “myID” with whatever is appropriate:

    <h4 class="collapseomatic" title="The History of Star Wars" id="myID">The History of <em>Star Wars</em></h4> <!-- Returns title with Collapse-o-matic formatting -->
    <div class="content_collapse_wrapper"><div id="target-myID" class="collapseomatic_content force_content_collapse">Collapsed content</div></div> <!-- Returns post content in collapse-o-matic div -->
    Contemplative Computing


    Regarding listing posts… Any ideas about how to deal with a page where some posts are called multiple times? This seems to break the jquery because the same ID is showing up in multiple places. After the first instance, a repeat post will not expand properly. I’d greatly appreciate some help with this.

    Thanks for the excellent plugin!


    Contemplative Computing


    Very quickly answered my own question. Just appended “-1” “-2” etc. to the end of the div IDs in subsequent calls for posts.



    Sounds good!



    Is it possible to configure this plug-in to – collapse texts as you hover over?




    In my limited understanding, what causes the collapsemotic plugin to function has to do with a javascript function activated when you click on a link. This changes a class in the hidden content, which is then modified by CSS.

    So in order to modify the plugin, you’d have to modify the javascript in the plugin file itself, and not just muck around with the CSS.

    You could try creating a simple roll-your-own-elements and just add line of CSS for .collapseomatic_content:hover { display: none }, but I don’t know if it would work properly.

    I’m sure Baden can give you a more conclusive answer. Good luck!



    Great work!
    Maybe you can help me with this:
    I want to show a Thumbnail behind or left from a title but when I expand the content I want the thumb to hide (because I will be showing the full image as part of the content).

    Any help??


    Plugin Author Baden


    [expand title="<img src='thumbnail.jpg' /> I am a thumbnail" tag="div" swaptitle="Poof, no more thumbnail"] <img src='full_size_image.jpg' /> [/expand]




    Putting an image in place of [expand title=””
    doesn’t seem to show the image to me, only the name



    oh i got it, I’d got “” instead of ” on the img attributes




    That will have the image url appearing when you hover over the title though… If you want to remove that, you’ll have to roll your own elements.

    Plugin Author Baden


    if you want to change the hover over text, use the alt attribute. Examples of all attributes are available:

    @enzoppi, bit late perhaps, but here is a good article on the Walker Class:

    I am not quite sure where to start with this. I am hoping it might be possible to by pass my theme if need be and place an out of wrapper tab that wil contain a Collapse-O-Matic pop-up. The idea is for a set (or two in my case) of tabs with associating collpasing div that contain a contact form, and social sharing links.

    I can do the rest of the stuff it is just how to setup the tabs and divs – I guess primarily a css thing?

    Using it already btw as a collapsing menu area directly under the header, with columns per continent (a localities taxonmomy showing post counts per entitiy) – I love it.


    I don’t totally understand your description here. It might help if you added a screenshot or a link to your site.

    In any event, if your looking to add a collapsible element, you should be fine with the basic roll-your-own-elements code and accompanying CSS.

Viewing 15 replies - 16 through 30 (of 44 total)
  • The topic ‘[Plugin: jQuery Collapse-O-Matic] Roll your own Elements ideas’ is closed to new replies.