I have an events page where there are multiple events on any given day. I want to display the event date as a header, and have a bulleted list of that day's events under it.
Some days may have a lot of events so I also want the list to be collapsed when first viewing the page. That way visitors can find the date they are interested in quickly, expand the list of that day's events, and find the information they are looking for.
My View looks like this:
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<ul>
<wpv-loop>
[heading condition='date' value='[types field="event-date" style="text" format="l, F j, Y"][/types]']
<hr />
<h3 class="[types field="event-date" style="text" format="F-j-Y"][/types]show">[types field="event-date" style="text" format="l, F j, Y"][/types]</h3>
[/heading]
<div class="[types field="event-date" style="text" format="F-j-Y"][/types]events">
<li>[wpv-if url="wpcf-event-website" evaluate="!empty($url)"]<a href='[types field="event-website" output="raw"][/types]'>[/wpv-if]<strong>[wpv-post-title]</strong>[wpv-if url="wpcf-event-website" evaluate="!empty($url)"]</a>[/wpv-if]: [types field="event-street-address"][/types] [wpv-if city="wpcf-event-city" evaluate="$city != 'Other'"][types field="event-city"][/types][/wpv-if][wpv-if othercity="wpcf-event-city" evaluate="$othercity = 'Other'"][types field="other-city"][/types][/wpv-if], AZ [types field="event-zip-code" format="FIELD_VALUE"][/types]<br />
[wpv-if time="wpcf-event-start-end-times" evaluate="!empty($time)"]Time: [types field="event-start-end-times"][/types]<br />[/wpv-if]
[wpv-if cost="wpcf-event-cost" evaluate='!empty($cost)']Cost: [types field="event-cost" separator=", "][/types]<br />[/wpv-if]
Available Activities:
[wpv-if evaluate="'[types field='event-activities' separator=', '][/types]' != ''"]
[types field='event-activities' separator=', '][/types]
[/wpv-if]
[wpv-if otheractivities='wpcf-event-other-activities' evaluate='!empty($otheractivities)']
[wpv-if evaluate="'[types field='event-activities' separator=', '][/types]' != ''"], [/wpv-if]
[types field="event-other-activities" separator=", "][/types]
[/wpv-if]
[wpv-if description="wpcf-event-description" evaluate='!empty($description)']<br />More: [types field="event-description"][/types][/wpv-if]
</li>
</div>
</wpv-loop>
</ul>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]<strong>No events found</strong>[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]
I also have the following code in the JS section:
jQuery( document ).on( "click", "h3[class$='show']", function() {
jQuery( "div[class$='events']" ).slideToggle( "slow", function() {
});
});
I'm trying to group the show/hide function by date, but I'm not quite getting it right. With this, ALL dates collapse or expand whenever any of the date headings are clicked. Since this list will be dynamic (i.e. today's event's won't show up in the list tomorrow), I need the JS code to be able to figure out which group to show, and ONLY expand that date's events.
I think I'm close with this, but I just can't figure out how to tell the jQuery which date we're looking at. It seems like it needs a loop of some sort to cycle through each day in the calendar. I'm not sure if Views is capable of passing a field into the JS section though.
Hello,
Thank you for your question.
There are few jQuery functions that you might use. In my opinion, the best approach is to add class to the element when it is expanded and remove it when we click somewhere else. Please try with this code:
jQuery( document ).on( "click", "h3[class$='show']", function() {
var datesToExpand = [jQuery(this).next( "div[class*='events']" )];
if(!datesToExpand[0].hasClass('expanded-events')) {
datesToExpand.push(jQuery("div.expanded-events"));
}
jQuery.each(datesToExpand, function() {
jQuery(this).slideToggle( "slow", function() {
jQuery(this).toggleClass('expanded-events');
});
});
});
A little explanations:
1) When we click on h3 we create a variable which is an array. We add there the first element after h3 which class contains 'events'
2) After that, we check if is it expanded div. If it is not, we add the expanded div to array.
3) We iterate through the array and for each element we do:
3.1) slideToggle
3.2) toggleClass
Why we need the second step? Because without it, we will be able to collapse div only by clicking on the header before it. This solution keeps only one (or none) div expanded.
Please check if this code works for you. If you have any further questions please do not hesitate to ask.
Thank you
This doesn't quite do what I need it to.
The jQuery code you suggested has all of the days in the expanded format. When you click on a <h3>, it only collapses the details for the first event below the date - all other events on that day are still expanded. Clicking again expands the first event's details.
However, I'm looking into changing this up a bit and trying to use the jQuery accordion.
I'm wrapping the entire
in the accordion div
<div id="accordion><!--loop here--></div>
.
In the loop, each event's details are now in a
with a
for all events on October 20 2015. The class set up this way will allow all events on a given day to have the same class.
My JS editor now has the following:
jQuery(document).ready(function($) {
$( "#accordion" ).accordion({
collapsible: true,
active: false
});
// Collect all li classes ending in "event"
var $list = $("li[class$='event']");
// Collect all unique class names
var classNames = $list.map(function() {
return this.className;
});
classNames = $.unique(classNames.get());
// wrap all of the same class names with a <ul>
$.each(classNames, function(i, className) {
$list.filter(function() {
return $(this).hasClass(className);
}).wrapAll("<div>");
});
});
Here is the page where this calendar is, so you can see how it is working: hidden link
Hello,
Thank you for the feedback. Can you try one more thing? Please add to your CSS this code:
div[class$='events'] {
display: none;
}
and use my JavaScript code? I forget to tell you about it. This should work, I tested it on my local server.
Also, your code will not work because you call accordion and wrap all events from one day after it. You should change the order of executing your code.
Thank you
Thanks for the assistance. This still didn't seem to work correctly, as it only allowed the first event under the date header to collapse/expand.
Ultimately, I ended up using the solution I provided earlier, except I moved the $("#accordion").accordion({ bit below the rest in the jQuery code. It seems that the order that these functions were being called caused it to work incorrectly earlier, but it looks to be working correctly now.
Thanks again for your help.
