How to make one dropdown close when clicking another dropdown

I have 2 href links in one page and on click the href opens. But when I click the other href (without closing the first one) the first one stays open.

How can I solve this?

At first I tried to only open and close the dropdown with CSS, but that got really messy because of the two buttons. Now I can open both buttons and close them when I click oudside of the button-area or on the button itself again. But it doesn’t close when clicking the other button.

I imagine this isn’t a hard thing to solve but I just can’t seem to figure it out.

Thanks a lot!

dashboard_home.html

% extends 'dashboard.html' %}

{% block content %}
{% block static %}
{% load static %}
<link rel="stylesheet" href="{% static 'dashboard_home.css' %}">
{% endblock static %}

<div class="welcome-message">
    <p>Hello, {{ request.user.first_name }} </p> 
    <img src="{% static 'Logo/Logo_DarkGreen.png' %}" class=header-logo>

</div>    

<div class="buttons">
    <a href='#' onclick="myFunction()" class='basic-button'><h2>happy</h2><br><h3>head</h3></a>
    <div class="dropdown-modules" id="dropdown-modules">
        <a href="#">Module 1</a>
        <a href="#">Module 2</a>
        <a href="#">Module 3</a>
        <a href="#">Module 4</a>
        <a href="#">Module 5</a>
    </div>
        
    <a href='#' onclick="myFunction1()" class='basic-button'><h4>healthy</h4><br><h3>heart</h3></a>
    <div class="dropdown-modules" id="dropdown-modules1">
        <a href="#">Module 6</a>
        <a href="#">Module 7</a>
        <a href="#">Module 8</a>
        <a href="#">Module 9</a>
        <a href="#">Module 10</a>
    </div>
</div>    

<br>
<br>

<script>
function myFunction() {
  document.getElementById("dropdown-modules").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.basic-button')) {
    var dropdowns = document.getElementsByClassName("dropdown-modules");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

function myFunction1() {
  document.getElementById("dropdown-modules1").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.basic-button')) {
    var dropdowns = document.getElementsByClassName("dropdown-modules1");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script> 

{% endblock content %}

dashboard_home.css

body{
    background-color: #ececec;
}

.welcome-message{
    font-size: 25px;
    color: #ffffff;
    background-color: #608f7d;
    padding: 14px 14px 14px 20px;
    box-shadow: 0px 2.5px 1.5px #27272780;
    position: relative;
    display: flex;
}

.header-logo{
    width: 20%;
    position: absolute;
    right: 10px;
}

.buttons{
    padding: 60px 10px 20px 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly; 
}

.basic-button{
    height: 130px;
    width: 130px;
    border-radius: 50%;
    text-decoration: none;
    text-transform: lowercase;
    font-weight: 500;
    color: #608f7d;
    font-size: 22px;
    box-shadow: -10px -10px 15px rgba(255,255,255,0.5), 10px 10px 15px rgba(70,70,70,0.12);
    border: 2px solid #ececec;
    outline: none;   
    text-align: center; 
    cursor: pointer;
    position: relative;
}


.basic-button:hover{
    box-shadow: -10px -10px 15px rgba(255,255,255,0.5), 
                10px 10px 15px rgba(70,70,70,0.12),
                inset -10px -10px 15px rgba(255,255,255,0.5), 
                inset 10px 10px 15px rgba(70,70,70,0.12);
    color: #f28500;            
}

.basic-button h2{
    font-size: 20px;
    line-height: 2px;
    margin-block-end: 0em;
    margin-block-start: 2.5em;
    font-weight: 600;
}

.basic-button h4{
    font-size: 18.5px;
    line-height: 2px;
    margin-block-end: 0em;
    margin-block-start: 2.7em;
    font-weight: 600;
}

.basic-button h3{
    font-size: 25px;
    line-height: 2px;
    margin-block-end: 0em;
    margin-block-start: -0.4em;
    font-weight: 500;
}

.dropdown-modules{
    display: none;
    overflow: hidden;
    position: absolute;
    padding: 20px;
}

.show {display: block;}


.dropdown-modules a{
    width: 300px;
    margin-top: 30px;
    font-size: 18px;
    text-decoration: none;
    color: #608f7d;
    display: flex;
    box-shadow: -10px -10px 15px rgba(255,255,255,0.5), 10px 10px 15px rgba(70,70,70,0.12);
    border: 2px solid #ececec;
    border-radius: 25px;
    padding-left: 20px;
    font-weight: 500;
}

.dropdown-modules {
    margin-top: 130px;

}

Answer

When you click outside of button area, if its getting closed. then you should keep both links in different div and adjust the style of button class as per your need.

<div class="buttons">
    <a href='#' onclick="myFunction()" class='basic-button'><h2>happy</h2><br><h3>head</h3></a>
    <div class="dropdown-modules" id="dropdown-modules">
        <a href="#">Module 1</a>
        <a href="#">Module 2</a>
        <a href="#">Module 3</a>
        <a href="#">Module 4</a>
        <a href="#">Module 5</a>
    </div>
</div>
<div class="buttons">..... </div>

Advertisement

Answer