How to change from .show( ) to .reveal( )? (Updated)
<p><strong>Disclaimer</strong>: I'm new to web development, and suck at anything JavaScript related.</p>

<p>I'm trying to change the <code>.show()</code> in my code to <code>.reveal()</code>, and I can't seem how to do this properly. No errors are being generated, as nothing is happening when I select <code>day_listing_mobile</code> <code>&lt;span&gt;</code>s</p>

<p><strong>Here is my JavaScript Code</strong>:</p>

<pre><code>(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 &lt;ul&gt; elements

        // attach click event to the &lt;span class="day_listing"&gt; elements
        $('.day_listing_mobile').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 &lt;ul&gt; of clicked &lt;span&gt;

            $('#myMobileModal').reveal();
        });
    }

})(jQuery);
</code></pre>

<p><strong>Here is what I'm hiding and wanting to reveal</strong>:</p>

<pre><code>{cal_cell_content}&lt;span class="day_listing_mobile"&gt;{day}&lt;/span&gt;&lt;div id="myMobileModal" class="reveal-modal"&gt;&lt;ul class="event_list"&gt;{content}&lt;/ul&gt;&lt;/div&gt;{/cal_cell_content}
            {cal_cell_content_today}&lt;span class="day_listing_mobile" id="today_listing"&gt;{day}&lt;/span&gt;&lt;div id="myMobileModal" class="reveal-modal"&gt;&lt;ul class="event_list"&gt;{content}&lt;/ul&gt;&lt;/div&gt;{/cal_cell_content_today}
</code></pre>

<p>The above code is generating <code>&lt;ul&gt;</code>s using CodeIgniter's Calendar class that I'm <code>.hide()</code>ing on mobile devices, and that I'm wanting to eventually <code>.reveal()</code> instead of <code>.show()</code>.</p>

<p><strong>Here is how <code>.reveal()</code> works</strong>:</p>

<pre><code>&lt;script type="text/javascript"&gt;
$(document).ready(function() {
     $('#myButton').click(function(e) {
          e.preventDefault();
      $('#myModal').reveal();
     });
});
&lt;/script&gt; 
</code></pre>

<p>(<a href="http://www.zurb.com/playground/reveal-modal-plugin" rel="nofollow">more information on Reveal by Zurb</a>)</p>
