Forums

WordPress › Support » Plugins and Hacks

jquery slideToggle post content help (5 posts)

  1. khanvict
    Member
    Posted 1 year ago #

    my index page lists the post titles, date added, and comment information in a list sorted by categories. if you click 'click to read more' link , it loads <?php the_permalink() ?> and takes you to the page like normal.

    what i want instead is when you click the link to slideToggle the post content (i guess not the permalink) below.

    here is the code:

    <div class="postWrapper">

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

<div class="post">

<div class="postTitleBar">title</div>

<div class="cCLeft">
<h2 class="post">
<?php the_title(); ?>
</h2>
</div>

<div class="cCMiddle"> added
<?php the_time('F jS Y') ?>
        |
<?php comments_popup_link('0 Comments', '1 Comment', '% Comments'); ?>
</div>

<div class="cCRight">
<a href="<?php the_permalink() ?>" title="Permanent Link to <?php the_title_attribute(); ?>">click to read more</a>
</div>

</div>

    <?php endwhile; ?>
    <?php endif; ?>
  </div>

    what this looks like:

    -Title Bar (full width of div)-
    next line contains:
    -Post Title (div aligned left), Date/Time + Comments (div aligned left), 'click to read more' (div aligned right)-

    and what i want is for the post content to be toggled and balanced below all of this and displayed using the full width when you click 'click to read more'. also, will it contract if i click the link once more?

    thank you in advance for any assistance.

  2. khanvict
    Member
    Posted 1 year ago #

    Update I got it working but it only works with the most recent post. When I add multiple posts the slideToggle() effect only works on the most recent post (with a bit of hesitation). It does not hide the content for the other posts by default nor does the slideToggle() work for the other posts.

    It also does not automatically expand the block or the background in which this category of posts are located. It pushes the other elements down fine though.

    Here is what I am doing:

    HTML:

    <html>
<body>
<div class="cCRight">
<a id="morelesslink" href="#"> More / Less</a>
</div>
<div id="hiddencontent" class="expand">
<?php the_content(); ?>
</div>
</body>
</html>

    SCRIPT:

    <script>
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
 $('#hiddencontent').hide();
// toggles the slickbox on clicking the noted link
 $('#morelesslink').click(function() {
  $('#hiddencontent').toggle(400);
  return false;
 });
});
</script>

    CSS:

    .cCRight {
    font-size:9px;
    padding:18px 0px 0px 0px;
    float:right;
    position: relative;
    z-index: 1;
}
.expand {
    width: 839px;
    font-size:9px;
    padding:18px 0px 0px 0px;
    float:left;
    clear:left;
    position: relative;
    z-index: 2;
}

    How can i get slideToggle() and the .hide() to be called on every post?

  3. khanvict
    Member
    Posted 1 year ago #

    Is this an issue of calling id's which are unique when I should be calling classes? When I try to call the class instead of id it slideToggles() ALL the post contents when I click just one 'More / Less' link so then I have the opposite problem.

    Is there a way I can tell jquery to get the postID of that particular post that I am wanting to view and to only expand the content of that particular post?

  4. khanvict
    Member
    Posted 1 year ago #

    I found this article on 'how to expand/collapse WordPress posts with jquery' but I don't really understand how to specifically implement it with my particular classes and code:

    "First, hide the post content:
    jQuery(“.post .entry-content”).hide();?
    Next, it would be very inefficient to have an editor add a control element to each post. So, we could add it to the theme’s post.php page, but then, the control would appear even if the user had JavaScript disabled. We want this
    to degrade gracefully, it’s an enhancement after all.
    If someone comes across this content in a mobile browser without JavaScript support or a text-only or text-to-speech browser, we’ll want them to just view the content as normal without any non-functional elements distracting them. We’ll use jQuery to add our control element. If JavaScript is disabled, it simply won’t appear.
    jQuery(“.post”).after(“<div class=’openIt’ style=’border-top: 1px solid #666; color: #036; text-align:right; cursor:pointer;’>Expand</div>”);
    We now just need a nice way to show and hide the post’s content:
    jQuery(“.openIt”).click(function() {
    jQuery(this).prev(“.post”).find(“.entry”).slideToggle(“slow”);
    });
    Last, let’s make sure the instructions in the .openIt div update:
    jQuery(“.openIt”).toggle(function(){
    jQuery(this).html(“Close”)},
    function(){
    jQuery(this).html(“Expand”)
    });
    …
    That’s it! This is very useful jQuery enhancement for WordPress."

    http://wparena.com/how-to/how-to-expandcollapse-wordpress-posts-with-jquery/

  5. jbeyer123
    Member
    Posted 5 months ago #

    Has anyone figured this out?

    This is the code that I have

    <div id="blog" >
<?php query_posts( 'cat=3&order=ASC' );

 ?>

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

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
	 <h3 class="storytitle"><?php the_title(); ?></h3>
	<div class="meta"><?php edit_post_link(__('Edit This')); ?></div>

	<div class="storycontent" style="border-bottom:1px solid #900">

		<?php the_content(__('(more...)')); ?>
	</div>

</div>

<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

            </div>

    I basically want just the title of the post to appear and then when they click the title it expands down to reveal the post. And then when they click the title again it disappears or when they click another title the first post condenses and the second one appears.

    Thanks

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags