Question

Disclaimer: I’m new to web development.

Scenario: I’m making an event based calendar using CodeIgniter. It works great on a desktop/tablet sized window, and I’ve made a mobile version using Foundation 2.0 by Zurb. It looks great, but there’s a problem I’m facing.

Problem: In the mobile version, when the calendar generates, I’m needing to hide the <ul>s (that display the events in the desktop version) in the mobile version. Then I need to be able to call the <ul>s when the day_listings (which are the date numbers on the calendar) are selected/clicked/etc.

Here is how the calendar class generates a date and its events:

<td>
   <span class="day_listing">7</span>
      <ul class="event_list">
         <li class="event_type" id="26">Event 1</li>
         <li class="event_type" id="27">Event 2</li>
         <li class="event_type" id="28">Event 3</li>
         <li class="event_type" id="29">Event 4</li>
         <li class="event_type" id="30">Event 5</li>
      </ul>
</td>

Here is the code that I am trying to work with:

{cal_cell_content}
   <span class="day_listing">{day}</span><ul class="event_list">{content}</ul>
{/cal_cell_content}

{cal_cell_content_today}
   <span class="today_day_listing">{day}</span><ul class="event_list">{content}</ul>
{/cal_cell_content_today}

Note: This is what you need to work with.

Question: What method(s) do I need to use (e.g. CSS/JavaScript/PHP/etc.) to hide the <ul>s properly when the calendar class generates, and to call them when selected/clicked/etc. on the day_listings?

Thank you so much for all of your help! Below are the resources I’m using that you can reference if you’re having trouble knowing what I’m talking about:

• CodeIgniter
• Foundation

Answer 1

(function($) {
    var isMobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
    if (isMobile) {
        $('.event_list').hide(); // setting display:none; on all .event_list <ul> elements

        // attach click event to the <span class="day_listing"> elements
        $('.day_listing').click(function() {
            var $eventList = $(this).sibling('.event_list');

            $('.event_list').hide(); // again hide all possibly shown ones before opening the selected one

            $eventList.show(); // setting display:block on sibling <ul> of clicked <span>
        });
    }

})(jQuery);