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

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

Baden,

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

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

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

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

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

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?

@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

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

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.

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