Question

I have a show/hide Jquery function in place on a multi-entry page which toggles the visibility of extended content for each entry. It works nicely, however, when a “more” link is clicked it toggles the extended content for all entries simultaneously. I’m hoping to adjust the Jquery function to target each entry individually.

I thought the best way to achieve this would to have the Jquery function target EE’s unique {entry_id} parameter as part of the click event but I’m still struggling to figure out the syntax / implementation of using EE template tags in tandem with Jquery. I am very much a Jquery beginner. Can anyone advise?

The Jquery in place is as follows:

function showMore(){

$('.more').hide();

$('.morelink a').click(function(e) {
$('.more').slideToggle('slow');
$('.morelink a').toggleClass("less");
$(this).text($(this).text() == 'Less' ? 'More' : 'Less');
e.preventDefault();
});
}

$(document).ready(function(){
showMore();
}); 

This looks for the click of a text link (.morelink a) and slidetoggles a hidden div (.more) while also togglgling the text of said link from “More” to “Less” depending on the state. Note that this function is located in a separate template which gets embedded on page load.

The stripped-down html in question is simply:

{exp:channel:entries channel=“x” limit"x"}

<div class=“content”>content</div>
<div class="more">more content</div>
<div class="morelink"><a href="#">More</a></div>

{/exp:channel:entries} 

I’ve tried every permutation and arrangement I can think of to get {entry_id} recognized but to no avail. Not sure if it’s a parse-order problem, a syntax problem, or if this method is just misguided. Any and all guidance is GREATLY appreciated.

Answer 1

You don’t need to tie your jQuery in with EE’s {entry_id} for this.

Wrap each content block so it looks like this:

{exp:channel:entries channel=“x” limit"x"}
    <div class="content_block">
        <div class=“content”>content</div>
        <div class="more">more content</div>
        <div class="morelink"><a href="#">More</a></div>
    </div>
{/exp:channel:entries} 

Then change your jQuery to this:

function showMore() {
    $('.more').hide();

    $('.morelink a').click(function(e) {
        var block = $(this).parents('.content_block');
        block.find('.more').slideToggle('slow');
        block.find('.morelink a').toggleClass("less");
        $(this).text($(this).text() == 'Less' ? 'More' : 'Less');
        e.preventDefault();
    });
}

$(document).ready(function(){
    showMore();
}); 

Now, each time a link is clicked it will reference only the elements within its local content_block DIV.