1

I'm trying to display the_content of a post on click.

the problem I'm having is that it display always display the same content.

I mean by on click on read for post A, it display the_content of post A, but also the one of post B, post C, etc.

Here was my original code:

 <ul class="top-stories">  <?php query_posts('showposts=2&post_type=post'); ?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

                             <li>
                                <a href="<?php the_permalink(); ?>" rel="bookmark">
                                    <div class="top-story-image"> <?php the_post_thumbnail('small-thumb'); ?>
                                    </div><!--top-story-image-->

                                         <h2><?php the_title(); ?></h2>
                                </a>
                                         <a class="go" href="javascript:void(0)">read more</a>
                                         <div class="pop" style="display:none"><?php the_content(); ?></div>
                            </li>

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

                        </ul>

and my jquery:

$(document).ready(function() {
  $('a.go').click(function() {
   $('.pop').fadeIn('500');
    });

To solve this, Im' trying to assign a pos-ID class and using a variable, However my jquery skills are limited unfortunately.

So far, I tried this:

<ul class="top-stories">  <?php query_posts('showposts=2&post_type=post'); ?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

                             <li>
                                <a href="<?php the_permalink(); ?>" rel="bookmark">
                                    <div class="top-story-image"> <?php the_post_thumbnail('small-thumb'); ?>
                                    </div><!--top-story-image-->

                                         <h2><?php the_title(); ?></h2>
                                </a>
                                          <a id="go_<?php echo($post->ID); ?>" href="javascript:void(0)">read more</a>
                                         <div class="pop_<?php echo($post->ID); ?>" style="display:none"><?php the_content(); ?></div>
                            </li>

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

                        </ul>

and using in jquery:

   $('a#go_' + post_id).html();).click(function() {
  var post_id = $(this).attr('id');
    if (post_id != '') {
      var content = $('.pop_' + post_id).html();
      $('.pop').html(content).show();
      }); 

but it doesn't work out ..

Any highlite - or if 'm on the good way would be amazing;

thank you !

1

Please try the following javascript you need to add class to a tag for read more

<a class='readmode'>Read More</a>

$('.readmode').click(function() {
     $(this).siblings('.pop').slideToggle();
     return false;
}); 

Here is the demo http://jsfiddle.net/fvcvyc1e/4/

  • HI, Thank you. IT doesn't seem to work . . . i've try to add the class you put by keeping the id and the href, didn't work. I also try just putting the class you said without the previous id and Href and dint change anything . . . . Do you have any other suggestions by any chance :( ? – tibewww Jun 19 '15 at 12:57
  • Can you please give me page link so i will check out – Mitul Jun 19 '15 at 13:00
  • Hi, Unfortunalty I can't provide any link I'm afraid :( :( DO you have nay other suggestion by any chance :( – tibewww Jun 19 '15 at 13:01
  • Can you please update your html css and javascript for the particulate block on jsfiddle.net/fvcvyc1e/4 and let me know i will check out – Mitul Jun 19 '15 at 13:02
  • Let me know if you are updating code over the jsfiddle or not – Mitul Jun 19 '15 at 13:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.