JQuery 在 img click 上折叠 div

Question

I have a two part question concerning CSS styling and JQuery functionality.

1. (most important): In my code below, when the user clicks the round profile image, hypothetically the "profiledrop" div should appear. If I replace the tag with plain text, the code works just fine. However, with an image instead of text as the link, the code no longer works.

2. (less important): What is causing the "notification-tab" div to be so large? It ends up coming out to almost 100px for each div, which is massive. I want to at least half this size? What part of the CSS code do I need to modify to accomplish this?

I've been typing this code for the last 10 hours, so I'm basically braindead at this point. I'm sure both answers are simple, but I'm just not seeing the solution. Thank you in advance for your help!

Codepin: https://codepen.io/dansbyt/pen/xxgayPa?editors=1010

HTML:

<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">
  <div class="profile"><a href="#" id='launch'><img src='https://mrdansby.com/resources/pics/1.png'></a></div>
  <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>

CSS:

/* Notification Infastructure */
.profiledrop {
    position: absolute;
    right: 15px; top: 65px;
    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;}
}



.profile{
  position: absolute;
  top: 0%; right: 15px;
  width: 40px;
  clip-path: circle();}
  .profile img{float:right; max-width: 100%; max-height: 100%; display: block;}

JQUERY:

// 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").show();
});

Answer 1

'launch' should be on the img element, such as:

<div class="profile">
    <a href="#">
        <img id='launch' src='https://mrdansby.com/resources/pics/1.png'>
    </a>
</div>

Answer 2

I'll answer your second question first. The reason the notification tab is so large is that the.profiledrop class has a fixed width of 300px. Each notification group is inheriting the width of the parent, so those are also 300px. Each notification tab has a width of 100%, so its width becomes 100% of the nearest parent, which is the notification group, which is 300px, so that also becomes 300px.

To summarize this point, either change the width: 100% on the notification tab, or change the width: 300px on the profiledrop. I can't recommend which to do because I don't know what you want it to look like.

The simplest solution to your first question is to employ display: none. Take a look at the code snippet I've provided below and let me know if this is the behavior you're looking for.

 const image = document.querySelector("#myimage"); const paragraph = document.querySelector("p"); // I attach an event listener to the image to wait for a click event image.addEventListener("click", function() { if (paragraph.style.display === 'none') { // If the paragraph is currently hidden, I show it paragraph.style.display = 'block'; } else { // If the paragraph is currently shown, I hide it paragraph.style.display = 'none'; } })

 <img id="myimage" src="https://via.placeholder.com/350x150"> <p>Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. </p>