Question

I’m trying to make it so that when you click on a certain element, another div on the page is shown. I read some posts on how to do this but I’m still encountering issues.

Here’s the div that I want to hide:

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

Here’s the element that should trigger the show/hide:

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

Here’s my jQuery:

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);
    });
});

Answer 1

It sounds like you’re trying to toggle the visibility of the div whenever the span is clicked. If so then try the following

$(document).ready(function() {
  $('a li.notificationicon span').click(function(e) {
    e.preventDefault();
    $('div.notification-list-wrapper').toggle();
  });
});