WordPress.org

Ready to get started?Download WordPress

Forums

Collapse-O-Matic
Roll your own Elements ideas (45 posts)

  1. terryago
    Member
    Posted 2 years ago #

    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/

  2. Baden
    Member
    Plugin Author

    Posted 2 years ago #

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

  3. terryago
    Member
    Posted 2 years ago #

    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.

  4. terryago
    Member
    Posted 2 years ago #

    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 -->
  5. Ramzii
    Member
    Posted 2 years ago #

    Awesome, thanks so much :D

  6. DeannaRenee
    Member
    Posted 2 years ago #

    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 275x75 pixels (cropped preferably). Is this possible to do?

  7. terryago
    Member
    Posted 2 years ago #

    @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!

  8. DeannaRenee
    Member
    Posted 2 years ago #

    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

  9. terryago
    Member
    Posted 2 years ago #

    Always glad to be helpful.

    :)

  10. DeannaRenee
    Member
    Posted 2 years ago #

    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

  11. terryago
    Member
    Posted 2 years ago #

    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.

  12. DeannaRenee
    Member
    Posted 2 years ago #

    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

  13. enzoppi
    Member
    Posted 2 years ago #

    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.

  14. Baden
    Member
    Plugin Author

    Posted 2 years ago #

    @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?

  15. enzoppi
    Member
    Posted 2 years ago #

    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.

  16. dhkendall
    Member
    Posted 2 years ago #

    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 >)

  17. terryago
    Member
    Posted 2 years ago #

    Dhkendall,

    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 -->
  18. Contemplative Computing
    Member
    Posted 2 years ago #

    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!

    -Matthew

  19. Contemplative Computing
    Member
    Posted 2 years ago #

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

  20. terryago
    Member
    Posted 2 years ago #

    Sounds good!

  21. herzfams
    Member
    Posted 2 years ago #

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

  22. terryago
    Member
    Posted 2 years ago #

    Herzfams,

    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!

  23. bali2002
    Member
    Posted 2 years ago #

    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??

    Thanks!

  24. Baden
    Member
    Plugin Author

    Posted 2 years ago #

    Bali2002:
    [expand title="<img src='thumbnail.jpg' /> I am a thumbnail" tag="div" swaptitle="Poof, no more thumbnail"] <img src='full_size_image.jpg' /> [/expand]
    http://plugins.twinpictures.de/plugins/collapse-o-matic/documentation/

  25. bali2002
    Member
    Posted 2 years ago #

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

  26. bali2002
    Member
    Posted 2 years ago #

    oh i got it, I'd got "" instead of '' on the img attributes

    THANKS!!

  27. terryago
    Member
    Posted 2 years ago #

    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.

  28. Baden
    Member
    Plugin Author

    Posted 2 years ago #

    if you want to change the hover over text, use the alt attribute. Examples of all attributes are available: http://plugins.twinpictures.de/plugins/collapse-o-matic/documentation/

  29. Piet
    Member
    Posted 2 years ago #

    @enzoppi, bit late perhaps, but here is a good article on the Walker Class: http://wpti.ps/?p=140

  30. CallMeAndy
    Member
    Posted 2 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic