[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">
				<?php
				if ( comments_open() ) :
				  comments_popup_link('Leave a comment ↓', '1 comment ↓', '% comments ↓');
				endif;
				?>
				</span>
				<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 ); ?>
				</div></div>

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.

<?php
		$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
		$my_query->the_post();
		?>
        	<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.

<?php
			$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!

http://wordpress.org/extend/plugins/jquery-collapse-o-matic/