• 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/

Viewing 15 replies - 1 through 15 (of 44 total)
  • Plugin Author Baden

    (@baden03)

    Thank you for sharing these great examples. You should include links to pages that demo these. Regardless… you pretty much rock in my book.

    Thread Starter terryago

    (@terryago)

    Baden,

    Glad to help! It’s a really cool plugin in so many ways…

    1. Collapsible comments:
    http://shelterislandrisk.com/resources/webinars/cyber-risk-strategies-beyond-insurance/

    2. Collapsible post titles, with thumbnails:
    http://shelterislandrisk.com/resources/webinars/

    3. Custom excerpts:
    http://shelterislandrisk.com/what-we-do/

    Don’t have anything with content auto-expanded at the moment.

    Thread Starter terryago

    (@terryago)

    EDIT:

    In order to have content start expanded, you need to remove the force_content_collapse class from the collapseomatic_content div, in addition to adding the colomat-close tag to the collapseomatic title. So the corrected code for auto-expanded content would be:

    <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 -->
                        <div class="content_collapse_wrapper"><div id="target-<?php the_ID(); ?>" class="collapseomatic_content "><?php the_excerpt(); ?></div></div> <!-- Returns post content in collapse-o-matic div -->

    Awesome, thanks so much 😀

    Terryago,
    I really like your code for the collapsible post titles with thumbnails. Exactly what I was looking for for the site I’m currently working on. I do have a question for you or anyone else more PHP literate than I. I want to have the post title with the arrow to the left above the thumbnail and I want the thumbnail to be, say 275×75 pixels (cropped preferably). Is this possible to do?

    Thread Starter terryago

    (@terryago)

    @deannarenee,

    Glad the code is helpful.

    In order to switch the arrow position, you’d have to play around with the background-position attribute on the collapseomatic class. Assuming you’re using my code, which allows for both posts with and without thumbnails, you’d have to modify the following bit of css for the arrow.

    .collapseomatic {
    	background-position: 0px /*x-position*/ 8px /*y-position*/;
    }
    
    .has-thumb .collapseomatic {
    	background-position: 58px /*x-position*/ 8px /*y-position*/;
    }

    You’ll have to play with the css encoding for the header itself, or your arrow will probably overlay with another element. You can control that with the following.

    h4.collapseomatic {
            margin: 0;
            padding:  0 0 0 22px;
    }

    In order to fix the size of the thumbnail (and the padding), you can tweak the following bit of css.

    #post-list-item .collapseomatic img.attachment-thumbnail {
    	height: 50px !important;
    	width: 50px !important;
    	padding: 0 10px 0 0 !important;
    }

    Now, to have a size of 275x75px cropped, the best thing to do will probably be to create a custom thumbnail size and re-generate your thumbnails for existing posts. I’ve had success using the Additional Image Sizes (zui) plugin (the settings show up under Media -> Image sizes after install).

    Hope that helps. Good luck!

    Thank you so much for the quick response. I will play around with these tips and when done, I will post a link to the site. I think it will be liked a lot.
    Deanna

    Thread Starter terryago

    (@terryago)

    Always glad to be helpful.

    🙂

    Okay, I’ve been having a good bit of success, however. one thing I am still having issues with is how can I have the title and arrow above the thumbnail. The way it is now, I can get the arrow above the thumbnail and the title ends up below. What I basically want is:

    > TITLE OF POST
    ———————-
    | |
    | thumbnail |
    | |
    ———————-

    content of the post here when
    expanded.

    Thanks for your help.
    Deanna

    Thread Starter terryago

    (@terryago)

    Deanna,

    It would seem to make the most sense to me to move the img in the page template, instead of controlling it through CSS if you want it to appear below the post title.

    Try something like the following:

    <h4 class="collapseomatic" title="<?php the_title(); ?>" id="<?php the_ID(); ?>"><?php the_title(); ?></h4> <!-- Returns title with Collapse-o-matic formatting -->
                        <?php echo get_the_post_thumbnail($page->ID, 'thumbnail'); ?> <!--puts thumbnail below the title and above the expandable content-->
                        <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 -->

    You’ll obviously have to modify margins and padding, and you may need to insert a clear: both declaration to deal with annoying wrapping.

    Okay, here is the resulting page, based on your code for the Collapsible post titles, with thumbnails. I had a bit of help (okay, a LOT of help with the coding), but I am very happy with the results. I still have a few bits and pieces to do before the site launches.

    Accordion Page

    Great work, thanks for sharing!

    It could be useful use it with wp_list-categories. I have a hierarchical taxonomy and I want to expand only the parent term related to my search. For instance:

    Term1
    Term2
    Term3

    I click on Term2 and I get:

    Term1
    Term2
    Sub-term1
    Sub-term2
    Sub-term3
    Term3

    This is the code I’m using on a page:

    <?php
    //list terms in a given taxonomy using wp_list_categories (also useful as a widget if using a PHP Code plugin)
    
    $taxonomy     = 'auto';
    $orderby      = 'name';
    $show_count   = 0;      // 1 for yes, 0 for no
    $pad_counts   = 0;      // 1 for yes, 0 for no
    $hierarchical = 1;      // 1 for yes, 0 for no
    $title        = '';
    
    $args = array(
      'taxonomy'     => $taxonomy,
      'orderby'      => $orderby,
      'show_count'   => $show_count,
      'pad_counts'   => $pad_counts,
      'hierarchical' => $hierarchical,
      'title_li'     => $title
    );
    ?>
    
    <ul>
    <?php wp_list_categories( $args ); ?>
    </ul>

    Is there a simple way to do this?

    Thanks,
    E.

    Plugin Author Baden

    (@baden03)

    @enzoppi: I would recommend we move this to a new topic. Basically you will want to create a walker function that creates your collapse-o-matic code as needed. HOWEVER, keep in mind that the default functionality of wp_list_categories is that a parent is still clickable, showing all posts for all children categories. Adding the collapse will mean that clicking on a parent category will only show sub-categories… what if these have sub-sub categories? Will clicking on them expand or load the related posts?

    Thanks for you reply, Baden, I suppose you’re right. But I can’t find enough documentation on walker function. Anyone can help?

    Thanks,
    E.

    I am wondering if it’s possible to have <b>, <i>, etc. in the title without the html codes showing up in the alt-text when one hovers over it, something like (keeping with the theme of the documentation) having a title “The History of Star Wars” without the <i>s showing up in the alt text. (And yeah, I know, it could be equally asked with < strong > and < em >)

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