Thread

Hi—another question for you all from this relative noob, hope you don’t mind. I’m having issues getting Jquery show/hide to work for individual entries within a category group.

I am displaying a category group in a sidebar on a page as follows:

<div id="container">
 {exp:channel:categories channel="ice-cream" id="ice-cream" class="ice-cream" orderby="alphabetical" parent_only="yes"}
  <a href="http://{path=template_group/ice-cream}">{category_name}</a>
 {/exp:channel:categories}
</div>

This works great, except there’s one page where I want this sidebar list to display a list of links that just open/close individual div boxes (in the example below, the “showhidebox”) with more information about them, instead of going to their link. I’m trying to pull this information from the single individual entry that’s been published to each category group. I tried to set this up as follows:

<div id="container">
 {exp:channel:categories channel="ice-cream" id="ice-cream" class="ice-cream" orderby="alphabetical" parent_only="yes"}
  {if last_segment == 'relevant_page'}
   <a href="#">{category_name}</a>
   <div id="showhidebox">
   {exp:channel:entries channel="ice-cream" orderby="alphabetical" limit="1" cat_limit="1" disable="member_data|pagination|trackbacks"}
    {flavor}
    {color}
    {taste}
   {/exp:channel:entries}
   </div>
  {/if}
 {/exp:channel:categories}
</div>

In my jQuery I have the simple:

$(document).ready(function() {
 $("#container ul li").click(function(){
 $('#showhidebox').slideToggle('fast');
  });
 });

And I have display:none on the showhidebox in the CSS.

This works except that it only ever pulls in one set of entries—the same set of entries, no matter which link/category-group is clicked in the list. And when a link is clicked, it only ever displays the showhidebox div under the first <li> in the generated list.

Any thoughts about what I’m doing wrong here? Thanks!

I would remove the css display:none
and change your jquery to this:

$(document).ready(function() {
 $('#showhidebox').hide();
 $("#container ul li").click(function(){
 $('#showhidebox').slideToggle('fast');
  });
 });

if that doesn’t work post a link to the site and I’ll see if I can help you.

Hey Sean, thanks for your help. I changed the JQuery/CSS but this ends up displaying the #showhidebox div for every list item, except the first one. When I click any list item, it shows/hides the div under the first list item only (in other words, the JQuery function only seems to be binding to the first list item).

Also, the content in each one is pulled from only one entry item, instead from the entry item that has been published to that category. Since I’m new to EE (I inherited this project from someone better-versed in it) I suspect this is a problem with the way I’m tagging the dynamic pull of these entries.

i.e.:

<li>First Item</li>
<div id="showhidebox">First Item Entry Content</div><--The div that shows/hides on clicking any list item-->
<li>Second Item</li>
<div id="showhidebox">First Item Entry Content</div>
<li>Third Item</li>
<div id="showhidebox">First Item Entry Content</div>

Unfortunately I can’t share a link right now for the sake of client privacy. Does what I’m saying above make sense to you?

Thanks for your time, it’s really appreciated.

Okay, first off you’re div’s should be classes not ids.

I would change so that you have

<li class=“toggletrigger-{entry_id}>first item</li>
<div class=“showhidebox-{entry_id} hideme”>blah blah blah</div>

and then in your jquery

$(document).ready(function() {
 $('.hideme').hide();
 $("li.toggletrigger{entry_id}").click(function(){
 $('.showhidebox-{entry-id}').slideToggle('fast');
  });
 });

You’ll have to put your jquery inside exp:channel:entries tags for this to work. - I did this a long time ago an hope I’m remembering this correctly. Let me know what happens.

Also if you don’t want to publically share the link to the client site feel free to pm me.

Thanks for helping, Sean!

Kerouac, since this is more about jQuery than within the scope of ExpressionEngine support, would you mind if I moved this thread over to Community Support to let you two continue this discussion there?