ThemeShaper Forums » Thematic


Accordion Excerpts

(8 posts)
  • Started 11 years ago by Seijun
  • Latest reply from Tylerp
  • This topic is resolved
  1. Does such a thing exist? I would LOVE (/LOVE/) to make my post excerpts into js accordions, so that users could click a button to see more text from the post without having to actually visit the post. I would be using it here:
    The above page is where I list the dogs we currently have available for adoption. I have only 15 animals to a page right now, but already its somewhat cluttered and takes a bit of scrolling to reach the bottom (if your screen isn't a huge resolution). It would be great if only the "Gender/Age/Location/Contact" info was shown for every one, and then users could click a button or tab to display the entire description.

    Posted 11 years ago #
  2. @Seijun: I've been looking into accordions recently but didn't think of integrating them as you've mentioned. Very interesting idea for sure.

    Only thing that I wonder about (as technically 15 posts will be loaded on one page) is how long the initial loading time will be for the adoptables page?

    Posted 11 years ago #
  3. This is what I have so far:

    function slider_scripts() {?>
        		<script type="text/javascript">
    jQuery( '.collapse' ).each(function(){ = 'collapser-' + Math.floor( Math.random() * ( Math.random() * 10000 ) );
     jQuery(this).wrap( '<div id="' + + '-expand"></div>' );
     jQuery(this).before( '<a id="' + + '-link" href="#" onclick="javascript:jQuery(\'#' + + '\').slideToggle();return false;">Click to show/hide description</a>' );
     jQuery(this).wrap( '<div></div>' );
    <?php }add_action('wp_footer','slider_scripts');

    This added js to the footer to make the accordion. Anything I wrap with <span class="collapse"></span> becomes expandable/collapsible. Got the code from:

    Now I need to filter it so that this js isn't added on posts. I tried:

    function remove_slider() {
     if (is_singular()) {
     return FALSE;
     } else {
     return TRUE;
    add_filter('slider_scripts', 'remove_slider');

    I must not be doing this last part right because the js still shows for posts.

    Posted 11 years ago #
  4. Hi Seijun,

    You don't need the filter. Just add the conditional to the first function like so:

    function slider_scripts() {
    	if (is_singular()) { ?>
    		<!-- scripts -->
    	<?php }


    Posted 11 years ago #
  5. Thanks, that worked

    Posted 11 years ago #
  6. @Seijun: Really like the end result! :)

    Posted 11 years ago #
  7. Erin

    Siejun, Thanks for sharing your code. This is such a good implementation, and for such a worthy cause. I hope they find good new homes.

    Posted 11 years ago #
  8. Tylerp

    Can I alter this function so I can change the linking text in different instances?

    I want to make a group of expandable bullet points and I like this better than Jquery Accordion.

    I'm having a heck of a time trying to do it because I'm a novice at wordpress.

    Posted 11 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.