Collapsing div toggle using dynamic channel entries

Question

Just a quick issue someone can hopefully help me out with

I have a webpage that displays listed event entries (using exp:low_events module). They are displayed as blocks that once clicked trigger a collapsible div to open, standard bootstrap plugin really.

OK, so my problem is that I would like to display a symbol that displays an up/down arrow dependent on whether the collapsible div is open or closed. Normally that wouldn't be an issue but because the entries are dynamic, they each need to be unique.

So right now if you open one entry, the toggle symbol changes on both. I have tried integrating expression engine variables into my script snippet but unfortunately this only has an effect on the first entry, and no effect on any subsequent entries.

{exp:low_events:entries 
channel="events" 
status="not closed" 
dynamic="off" 
show_passed="yes" 
show_upcoming="yes"}

<div class="row-fluid">
    <div class="span12">

        <a id="switch" class="{entry_id}" data-target="#details-{entry_id}" data-toggle="collapse">

        <div class="collapse-block">

        <h4>Title of Event <span class="closed pull-right {entry_id}"></span></h4>

        </div><!--collapse-block-->

        <div class="collapse in" id="details-{entry_id}">

          Collapsible content

        </div><!--collapse-->

    </div><!--span12-->
</div><!--row-->

{/exp:low_events:entries}



{exp:low_events:entries 
channel="events" 
status="not closed" 
dynamic="off" 
show_passed="yes" 
show_upcoming="yes"}

<script>

    $('#switch.{entry_id}').on('click', function(e) {
$('.closed.{entry_id}').toggleClass("expanded");
    });

</script>

{/exp:low_events:entries}

I'm not entirely sure about using EE variables in my script as its not something I've ever really done, but I'm struggling to see another option...although an obvious solution could be staring me right in the face

The idea of the above code is that when the <a id="switch" class="{entry_id}" is clicked it toggles a class of expanded the the <span class="closed">

Both the .closed and .expanded classes have background-images set to up and down arrows which will change when the collapsible opens and closes. Though as I mentioned earlier, this markup only seems to have an effect on the first entry and then no effect on the rest.

I'd really appreciate any advice on this

Answer 1

In the end this isn't really an ExpressionEngine question at all (you don't need to use any EE variables here). A few things:

1. You cannot have two elements with the same ID on each page (so, using <a id="switch"> within a loop is a no-no).
2. CSS class names cannot be purely numeric (e.g., class="{entry_id}).
3. You don't have an href value or closing tag for your anchor - this can cause issue in some browsers.
4. Your jQuery script should be abstracted to apply to all of your looped markup blocks.

I assume you have another script at play here as well, which is handling the collapsing via the the data attributes in your markup - if it's expecting an element with an id of toogle, you may have to adjust it so that it uses a class name instead.

Here's a revised version of your code which should work for you:

{exp:low_events:entries channel="events" status="not closed" dynamic="off" show_passed="yes" show_upcoming="yes"}
<div class="row-fluid">
    <div class="span12">

        <a class="switch" data-target="#details-{entry_id}" data-toggle="collapse" href="#"></a>

        <div class="collapse-block">
            <h4>Title of Event <span class="closed pull-right"></span></h4>
        </div><!--collapse-block-->

        <div class="collapse in" id="details-{entry_id}">
          Collapsible content
        </div><!--collapse-->

    </div><!--span12-->
</div><!--row-->
{/exp:low_events:entries}

<script>
    $('.switch').on('click', function(e){
        $(this).parent('div').find('.closed').toggleClass('expanded');
        return false;
    });
</script>

Answer 2

Low Events supports all channel:entries parameters and variables.

So I'd ignore the entry id and use count instead:

<div class="row-fluid">
    <div class="span12">

        <a id="switch" id="event{count}" data-target="#details-{entry_id}" data-toggle="collapse">

Now we're in HTML/JQuery territory! Personally I wouldn't use a class to identify each unique link, an ID is more appropriate.

Then in your JQuery:

$('a[id^="event"]').on('click', function(e) {
  $(this).find('.collapse-block').toggleClass("expanded");
});

Again personally I I'd say you're not using JQuerys 'on' handler correctly. This will add N events to the DOM depending on how many events you have displayed. This can be handled with 1 event to the container element.

$('.row-fluid').on('click', 'a[id^="event"]' function(e) {
  $(this).find('.collapse-block').toggleClass("expanded");
});