Using the EE {entry_id} parameter to set individual entries in a jQuery function?

Question

I have a show / hide jquery function on a multi-page page that toggles the visibility of rich content for each entry. It works well, however, when the “more” click is clicked, it simultaneously switches the advanced content for all posts. I hope to customize the jQuery function to customize each entry.

I thought the best way to achieve this is to force the JQuery object to use the unique EEs {entry_id} parameters as part of the click event, but Im still struggling to understand the syntax / implementation of using EE template tags in tandem with JQuery. I am very new to JQuery. Can anyone advise?

JQuery in place looks like this:

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 the text link (.morelink a) and slidetoggles of the hidden div (.more), as well as dragging the text of the specified link from "More" to "Less" depending on the state. Please note that this function is located in a separate template, which is implemented when the page loads.

The stripped down html in question is simple:

 {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 tried every permutation and arrangement that I can think of to recognize {entry_id}, but to no avail. Not sure if this is a problem with the parse-order parameter, a syntax problem or if this method is simply wrong. All and all recommendations are STRONGLY evaluated.

Answer 1

You do not need to bind your jQuery to EE {entry_id} for this.

Wrap each block of content so that 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, every time a link is clicked, it only refers to elements within its local content_block DIV.