• I’ve looked and looked on this forum and through plugins, but can’t find anything that will do what I’m imagining.

    What I’d like to do is have a page of excerpts. (My excerpts will be images.) If you click on the excerpt, the post will appear below the excerpt.

    I’d like it to function like the collapsible scriptygodess show/hide <!–more–> quicktag. https://www.scriptygoddess.com/archives/2004/05/20/show-hide-more-with-wordpress/

    Is there a way to code this into the template page with css ‘visibility’ code and div tags?

    Is this even possible?

    (and apologies, I accidently posted this in the wrong section earlier)

Viewing 4 replies - 1 through 4 (of 4 total)
  • There’s various ways to go about this. You could have an index page with the ‘excerpts’ which you make clickable links to single post pages which show the excerpt plus full post text.

    You could combine that with Ajax to get the full post text into the existing page for people that have JavaScript enabled.

    I did something similar for a while, but with javascript and CSS – I put this in the header:
    <style type=”text/css” media=”screen”>
    .posthidden {display:none}
    .postshown {display:inline}
    </style>
    <script type=”text/Javascript”>
    function expandcollapse (postid) {
    whichpost = document.getElementById(postid);
    if (whichpost.className==”postshown”) {
    whichpost.className=”posthidden”;
    }
    else {
    whichpost.className=”postshown”;
    }
    }
    </script>

    And then on the main page (I actually used it for a specific category page, but either way it should work), the code would look something like:

    <div class=”post”>
    <h2 id=”post-<?php the_ID(); ?>”>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></h2>
    <small><?php the_time(‘F jS, Y’) ?> <!– by <?php the_author() ?> –></small>
    ‘)”>
    [+/-] show/hide this post
    <span class=”posthidden” id=”<?php the_ID(); ?>”>
    <div class=”entry”>
    <?php the_content(‘Read the rest of this entry »’); ?>
    </div>
    <p class=”postmetadata”>Posted in <?php the_category(‘, ‘) ?> | <?php edit_post_link(‘Edit’,”,’|‘); ?> <?php comments_popup_link(‘No Comments »’, ‘1 Comment »’, ‘% Comments »’); ?>
    <!–
    <?php trackback_rdf(); ?>
    –>
    </div>
    </span>

    Of course, the span being wrapped around the block element makes it invalid, i think (not positive) – but you could easily fix that and just take them out – modify as you please. You could probably also work something out, using the customizable query/post listing plugin or any other, and add a short excerpt in addition to what is here (which just shows the title) – then just let it swap out that span with the one containing the full post.

    Oh – and just so I’m not falesly representing myself, this was totally just stuff I ripped off from Blogger tricks, and just plugged into the appropraite place here.

    Thread Starter slambert

    (@slambert)

    drobbins:

    This looks promising, though that code looks kind of mangled by the page. Any chance you could post it clearer? Or email it straight to me?

    Thanks!

    Thread Starter slambert

    (@slambert)

    Here’s the code that ended up working. Thanks to drobbins:

    -code to put in header:

    <style type="text/css" media="screen">
    .posthidden {display:none}
    .postshown {display:inline}
    </style>
    <script type="text/Javascript">
    function expandcollapse (postid) {
    whichpost = document.getElementById(postid);
    if (whichpost.className=="postshown") {
    whichpost.className="posthidden";
    }
    else {
    whichpost.className="postshown";
    }
    }
    </script>

    -the code for category-(catid).php

    <?php get_header(); ?>

    <div id="content">
    <?php if (have_posts()) : ?>

    <?php while (have_posts()) : the_post(); ?>

    <div class="post">
    <div id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></div>
    <small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small><a href="javascript:expandcollapse('<?php the_ID(); ?>')">[+/-]</a>
    <span class="posthidden" id="<?php the_ID(); ?>">
    <div class="entry">
    <?php the_content('Read the rest of this entry &raquo;'); ?>
    </div>

    <p class="postmetadata">Posted in <?php the_category(', ') ?> <strong>|</strong> <?php edit_post_link('Edit','','<strong>|</strong>'); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>

    <!--
    <?php trackback_rdf(); ?>
    -->
    </div>
    </span>
    <?php endwhile; ?>

    <div class="navigation">
    <div class="alignleft"><?php posts_nav_link('','','&laquo; Previous Entries') ?></div>
    <div class="alignright"><?php posts_nav_link('','Next Entries &raquo;','') ?></div>
    </div>

    <?php else : ?>

    <h2 class="center">Not Found</h2>
    <p class="center"><?php _e("Sorry, but you are looking for something that isn't here."); ?></p>
    <?php include (TEMPLATEPATH . "/searchform.php"); ?>

    <?php endif; ?>

    </div>
    </div>

    <?php include('sidebar.php'); ?>

    <?php get_footer(); ?>

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘how can i show excerpt and collapsible post?’ is closed to new replies.