Skip to content

JQuery show/hide and collapse if click outside

ikiK

I’ve started playing around with JQuery in the last week, and I’m needing some help understanding what I am doing incorrectly. I’m sure this is very simple, but please be patient as I am learning.

End result: When you click “Open Menu” – then the notification menu opens. If you click outside of the ul class “.profiledrop” then the notification menu closes.

// Tab collapser //
$('.notification-tab').click(function(e) {
  if ($(e.currentTarget).parent().hasClass('active')) {
    $('.notification-group').removeClass('active');
  } else {
    $('.notification-group').removeClass('active');
    $(e.currentTarget).parent().toggleClass('active');
  }
});

// Click outside collapser //
$(document).on('click', function(e) {
  if ($(e.target).closest(".profiledrop").length === 0) {
    $(".profiledrop").hide();
  }
});

// Menu Launcher //
$("#launch").click(function() {
  $(".profiledrop").show();
});
/* Notification Infastructure */

.profiledrop {
  display: none;
  width: 350px;
  height: auto;
  max-height: 600px;
  padding: 0;
  margin: 0;
  overflow-y: hidden;
  background: #eee;
  border-top: 4px solid #5B7042;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  -webkit-box-shadow: 2px 2px 10px -5px rgba(0, 0, 0, 0.75);
  box-shadow: 2px 2px 10px -5px rgba(0, 0, 0, 0.75);
}

.notification-group {
  border-bottom: 1px solid #e3e3e3;
  overflow: hidden;
}

.notification-tab {
  width: 100%;
  display: inline-block;
  border-bottom: 1px solid #e3e3e3;
}

.notification-list {
  height: 0px;
  max-height: 250px;
  padding: 0;
  overflow-y: auto;
  transition: height .5s;
}

.notification-list-item {
  display: block;
  min-height: 60px;
  overflow: hidden !important;
  box-sizing: border-box !important;
  padding: 15px 15px 15px 10px;
  font-size: 16px;
  border-bottom: 1px solid #e3e3e3
}

.notification-list-item:nth-child(even) {
  background-color: #E3E3E3
}

.notification-list-item img {
  clip-path: circle();
  float: left;
  margin-right: 10px;
  width: 60px;
  height: 60px;
  object-fit: cover
}


/* Misc Settings */

.message::not(.nopic) {
  margin-top: 0px;
  margin-left: 80px
}


/* Style for notification groups without image */


/* Notification text styling */

.label {
  float: right;
  padding: 0px 7px;
  margin-top: 20px;
  margin-right: 10px;
  border: 1px solid #5B7042;
  border-radius: 15px;
}

h4 {
  margin-left: 10px
}

h4,
.label {
  display: inline-block;
}

.message {
  margin-top: 0px
}

.date {
  float: right;
  color: darkgray
}


/* Active Section */

.active .notification-list {
  height: 250px;
}

.active .notification-tab,
.notification-tab:hover {
  background-color: #5B7042
}

.active .label,
.notification-tab:hover .label {
  border: 1px solid white
}

.notification-tab:hover {
  color: white
}

.active .label,
.active h4 {
  color: white
}


/* Responsive design */

@media only screen and (max-width: 514px) {
  body {
    margin: 0px
  }
  .profiledrop {
    width: 100%;
    margin: 0px;
    left: 0;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://mrdansby.com/private/style.css">
<div class="dropdown-container">
  <a href="#" id='launch'>Open Menu</a>
  <ul class="profiledrop">
    <li class="notification-group nopic">
      <div class="notification-tab">
        <h4>Tasks</h4>
        <span class="label">1</span>
      </div>
      <ul class="notification-list">
        <li class="notification-list-item">
          <p class="message"><b>Mr. Teacher</b> is requesting you complete the assignment you need to do before the deadline on Monday.</p>
          <span class="date">2m ago</span>
        </li>
      </ul>
    </li>
    <li class="notification-group">
      <div class="notification-tab">
        <h4>Behavior</h4>
        <span class="label">4</span>
      </div>
      <ul class="notification-list">
        <li class="notification-list-item">
          <img src="https://mrdansby.com/resources/pics/4.png">
          <p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
          <span class="date">5s ago</span>
        </li>
        <li class="notification-list-item">
          <img src="https://mrdansby.com/resources/pics/23.png">
          <p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
          <span class="date">15m ago</span>
        </li>
        <li class="notification-list-item">
          <img src="https://mrdansby.com/resources/pics/1.png">
          <p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
          <span class="date">5h ago</span>
        </li>
        <li class="notification-list-item">
          <img src="https://mrdansby.com/resources/pics/13.png">
          <p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
          <span class="date">3d ago</span>
        </li>
      </ul>
    </li>
    <li class="notification-group">
      <div class="notification-tab">
        <h4>Homework</h4>
        <span class="label">3/3</span>
      </div>
      <ul class="notification-list">
        <li class="notification-list-item">
          <img src="https://mrdansby.com/resources/pics/1.png">
          <p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
          <span class="date">3d ago</span>
        </li>
        <li class="notification-list-item">
          <img src="https://mrdansby.com/resources/pics/1.png">
          <p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
          <span class="date">3d ago</span>
        </li>
        <li class="notification-list-item">
          <img src="https://mrdansby.com/resources/pics/1.png">
          <p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
          <span class="date">3d ago</span>
        </li>
      </ul>
    </li>
  </ul>
</div>

Advertisement

Answer

When you click on menu you need to exclude it from you logic of closing the menu.

So create another if if (e.target.id != "launch") { and wrap your closing menu logic in it. You where opening with one event and closing in same time with another:

$(document).on('click', function(e) {
  if (e.target.id != "launch") {
    if ($(e.target).closest(".profiledrop").length === 0) {
      $(".profiledrop").hide();
    }
  }
});

I would also suggest to use .toggle(); here so you can open and close menu by clicking the button:

// Menu Launcher //
$("#launch").click(function() {
  $(".profiledrop").toggle();
});

EXAMPLE:

// Tab collapser //
$('.notification-tab').click(function(e) {
  if ($(e.currentTarget).parent().hasClass('active')) {
    $('.notification-group').removeClass('active');
  } else {
    $('.notification-group').removeClass('active');
    $(e.currentTarget).parent().toggleClass('active');
  }
});

// Click outside collapser //
$(document).on('click', function(e) {
  if (e.target.id != "launch") {
    if ($(e.target).closest(".profiledrop").length === 0) {
      $(".profiledrop").hide();
    }
  }
});

// Menu Launcher //
$("#launch").click(function() {
  $(".profiledrop").toggle();
});
/* Notification Infastructure */

.profiledrop {
  display: none;
  width: 350px;
  height: auto;
  max-height: 600px;
  padding: 0;
  margin: 0;
  overflow-y: hidden;
  background: #eee;
  border-top: 4px solid #5B7042;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  -webkit-box-shadow: 2px 2px 10px -5px rgba(0, 0, 0, 0.75);
  box-shadow: 2px 2px 10px -5px rgba(0, 0, 0, 0.75);
}

.notification-group {
  border-bottom: 1px solid #e3e3e3;
  overflow: hidden;
}

.notification-tab {
  width: 100%;
  display: inline-block;
  border-bottom: 1px solid #e3e3e3;
}

.notification-list {
  height: 0px;
  max-height: 250px;
  padding: 0;
  overflow-y: auto;
  transition: height .5s;
}

.notification-list-item {
  display: block;
  min-height: 60px;
  overflow: hidden !important;
  box-sizing: border-box !important;
  padding: 15px 15px 15px 10px;
  font-size: 16px;
  border-bottom: 1px solid #e3e3e3
}

.notification-list-item:nth-child(even) {
  background-color: #E3E3E3
}

.notification-list-item img {
  clip-path: circle();
  float: left;
  margin-right: 10px;
  width: 60px;
  height: 60px;
  object-fit: cover
}


/* Misc Settings */

.message::not(.nopic) {
  margin-top: 0px;
  margin-left: 80px
}


/* Style for notification groups without image */


/* Notification text styling */

.label {
  float: right;
  padding: 0px 7px;
  margin-top: 20px;
  margin-right: 10px;
  border: 1px solid #5B7042;
  border-radius: 15px;
}

h4 {
  margin-left: 10px
}

h4,
.label {
  display: inline-block;
}

.message {
  margin-top: 0px
}

.date {
  float: right;
  color: darkgray
}


/* Active Section */

.active .notification-list {
  height: 250px;
}

.active .notification-tab,
.notification-tab:hover {
  background-color: #5B7042
}

.active .label,
.notification-tab:hover .label {
  border: 1px solid white
}

.notification-tab:hover {
  color: white
}

.active .label,
.active h4 {
  color: white
}


/* Responsive design */

@media only screen and (max-width: 514px) {
  body {
    margin: 0px
  }
  .profiledrop {
    width: 100%;
    margin: 0px;
    left: 0;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown-container">
  <a href="#" id='launch'>Open Menu</a>
  <ul class="profiledrop">
    <li class="notification-group nopic">
      <div class="notification-tab">
        <h4>Tasks</h4>
        <span class="label">1</span>
      </div>
      <ul class="notification-list">
        <li class="notification-list-item">
          <p class="message"><b>Mr. Teacher</b> is requesting you complete the assignment you need to do before the deadline on Monday.</p>
          <span class="date">2m ago</span>
        </li>
      </ul>
    </li>
    <li class="notification-group">
      <div class="notification-tab">
        <h4>Behavior</h4>
        <span class="label">4</span>
      </div>
      <ul class="notification-list">
        <li class="notification-list-item">
          <img src="https://mrdansby.com/resources/pics/4.png">
          <p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
          <span class="date">5s ago</span>
        </li>
        <li class="notification-list-item">
          <img src="https://mrdansby.com/resources/pics/23.png">
          <p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
          <span class="date">15m ago</span>
        </li>
        <li class="notification-list-item">
          <img src="https://mrdansby.com/resources/pics/1.png">
          <p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
          <span class="date">5h ago</span>
        </li>
        <li class="notification-list-item">
          <img src="https://mrdansby.com/resources/pics/13.png">
          <p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
          <span class="date">3d ago</span>
        </li>
      </ul>
    </li>
    <li class="notification-group">
      <div class="notification-tab">
        <h4>Homework</h4>
        <span class="label">3/3</span>
      </div>
      <ul class="notification-list">
        <li class="notification-list-item">
          <img src="https://mrdansby.com/resources/pics/1.png">
          <p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
          <span class="date">3d ago</span>
        </li>
        <li class="notification-list-item">
          <img src="https://mrdansby.com/resources/pics/1.png">
          <p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
          <span class="date">3d ago</span>
        </li>
        <li class="notification-list-item">
          <img src="https://mrdansby.com/resources/pics/1.png">
          <p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
          <span class="date">3d ago</span>
        </li>
      </ul>
    </li>
  </ul>
</div>
ikiK
User contributions licensed under: CC BY-SA
5 People found this is helpful