jQuery to toggle Read More link

  • standapart

    (@standapart)


    11 years, 11 months ago

    Hi there, I’m hoping someone can help me out here as it will really make my day.

    On my index page, all the posts are displayed in chronological order. When users click a post it simply expands and they rarely need to view the actual single post. This is all working well.

    What I’m trying to do is toggle a read more link so that when the post expands, the Read More link dissapears and then reappears when the post shrinks again.

    I’m no jQuery expert and my solution seems to affect all Read More links for all the posts on the index page, even though I’m calling it within The Loop.

    I just want it to affect one post at a time. Nothing fancy.

    Here is my code that says when .trigger is clicked, toggle the readMore element.

    I guess I’m just calling it incorrectly. If anyone can help, that would be awesome.

    <span class="readMore"><?php the_field('read_more'); ?></span>

<script type="text/javascript">
$(".trigger").click(function () {
$(".readMore").toggle();
});
</script>
Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter standapart

    (@standapart)

    11 years, 11 months ago

    Oh by the way, the site is http://www.standapart.com.au but as it’s a live site and I don’t have a local web server installed, I’ve hidden the Read More links for now.

    bythegram

    (@bythegram)

    11 years, 11 months ago

    I’m no expert but I think the issue is because the “.trigger” and “.readMore” are classes (thus everything with the same class is affected. I don’t have a solution for you but I’d look into a way to make each “.trigger”/””.readMore” unique to the post it is on. Maybe something like

    <span class="<?php the_ID(); ?>_readMore"><?php the_field('read_more'); ?></span>

    You’d need to do the same for where ever your “trigger” is too. Then change your java calls.

    <script type="text/javascript">
$(".<?php the_ID();?>_trigger").click(function () {
$(".<?php the_ID();?>_readMore").toggle();
});
</script>

    I am just learning this stuff myself but that is what I would try. Best of luck!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘jQuery to toggle Read More link’ is closed to new replies.