script function not working to toggle classes in html

Question

I have created a profile menu with a dropdown menu using html and css. Now to toggle between closing and opening the dropdown I have added a script file but it is not working. How can I change my script function to achieve the toggle functionality?

let profilemenu = document.getElementById("profileMenu");

function toggleMenu() {
  profilemenu.classList.toggle("open-menu");
}

.profile-menu-wrap {
  position: absolute;
  top: 100%;
  right: 24%;
  width: 320px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s;
}

.profile-menu-wrap .open-menu {
  max-height: 400px;
}

<div class="navbar-right">
  <div class="online">
    <img src="https://via.placeholder.com/150?text=toggle-menu" class="nav-profile-img" onclick="toggleMenu()">
  </div>
</div>

<!-- ----------------------------profile-dropdown----------------------------------- -->

<div class="profile-menu-wrap" id="profileMenu">
  <div class="profile-menu">
    <div class="user-info">
      <img src="https://via.placeholder.com/50?text=profile">
      <div>
        <h3>James Sheldon</h3>
        <p>Full-stack Developer at Bizwy</p>
        <a href="#">View Profile</a>
      </div>
    </div>
    <hr>
    <a href="#" class="profile-menu-link">
      <img src="https://via.placeholder.com/50?text=feedback">
      <p>Give Feedback</p>
      <span>></span>
    </a>
    <a href="#" class="profile-menu-link">
      <img src="https://via.placeholder.com/50?text=setting">
      <p>Settings & Privacy</p>
      <span>></span>
    </a>
    <a href="#" class="profile-menu-link">
      <img src="https://via.placeholder.com/50?text=help">
      <p>Help & Support</p>
      <span>></span>
    </a>
    <a href="#" class="profile-menu-link">
      <img src="https://via.placeholder.com/50?text=logout">
      <p>Logout</p>
      <span>></span>
    </a>
  </div>
</div>

Above is my code, I have given the max-height as 0 to close the dropdown and changed the max-height to 400px with the new class to show the dropdown.

How can I solve the problem I faced with closing and opening the dropdown menu?

jspoh · Accepted Answer · 2022-11-13 10:45:41Z

1

It looks like your style.css code was the issue - you included a space where there shouldn't be one

.profile-menu-wrap.open-menu {
    max-height: 400px;
}

Try removing the space between .profile-menu-wrap and .open-menu

Alternatively, try this.

.open-menu {
    max-height: 400px !important;
}

Also, I'm not sure if you intend for this to happen but top: 100% with position: absolute means that the menu will be at the bottom of the page.

edited Nov 13, 2022 at 10:45

answered Nov 13, 2022 at 10:38

jspoh

1142 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sai charan Over a year ago

I tried both but none worked.

jspoh Over a year ago

@saicharan i copy pasted the code into codepen. Maybe you can play around and figure out what you did differently. codepen.io/jspoh/pen/PoamrqQ

Collectives™ on Stack Overflow

script function not working to toggle classes in html

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related