error in hide or show div on click on span
<p>I'm trying to make it so that when you click on a certain element, another <code>div</code> on the page is shown. I read some posts on how to do this but I'm still encountering issues.</p>

<p>Here's the <code>div</code> that I want to hide:</p>

<pre><code>&lt;div class="notification-list-wrapper" style="top: 124px; left: 355px; display: none; opacity: 1;"&gt;
    &lt;ul class="notification-list-menu"&gt;
        &lt;li class="notification-list-menu-item" id="unread-menu-item"&gt;Unread&lt;/li&gt;
        &lt;li class="notification-list-menu-item" id="all-menu-item"&gt;All&lt;/li&gt;
        &lt;li class="close-notification-list"&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul class="notification-list" data-type="unread"&gt;
</code></pre>

<p>Here's the element that should trigger the show/hide:</p>

<pre><code>&lt;a href="#"&gt;
    &lt;li class="notificationicon"&gt;
        &lt;span title="Notifications" class="notification-bubble" style="background-color: rgb(245, 108, 126); display: inline;top: 69px;left: 398px;"&gt;
            0
        &lt;/span&gt;
    &lt;/li&gt;
&lt;/a&gt;
</code></pre>

<p>Here's my jQuery:</p>

<pre><code>jQuery(document).ready(function() {
    jQuery('.notification-list-wrapper').hide();

    jQuery(".notification-bubble").css('cursor', 'pointer').click(function() {
        var $this = $(this);
        $this.next("div").fadeToggle(200);
        $('.notification-list-wrapper').not($this.next("div")).fadeOut(800);
    });
});
</code></pre>
