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