CODEWITHSUNDEEP
javascripthtmlcss
user6214188
user6214188

Reputation:

Drop Down Menu- How to link multiple buttons to javascript function

I am trying to develop a drop down menu. I have written html code and javascript for two buttons, but I am wondering how to link the second button to javascript. Do I need to write another function()?

<div class="dropmenu">
  <button onclick="myFunction()" class="button1" style="background-color:#61117F ;">Dropdown</button>
  <div id="Dropdown1" class="dropmenu-content">
    <a href=" http://www.apple.com/">Apple</a>
    <a href="https://www.google.com/">google</a>
  </div>
</div>

<div class="dropmenu">
  <button onclick="myFunction()" class="button1" style="background-color:#d7791b ;">DropDown2</button>
  <div id="Dropdown2" class="dropmenu-content">
    <a href=" https://www.yahoo.com/">Yahoo</a>
    <a href="https://www.facebook.com/">FB</a>
  </div>
</div>

<script>
  function myFunction() {
      document.getElementById("Dropdown1").classList.toggle("show");
      window.onclick = function(event) {
          if (!event.target.matches('.button1')) {
            var drop = document.getElementsByClassName("dropmenu-content");
            var i;
            for (i = 0; i < drop.length; i++) {
              var Dropdown = drop[i];
              if (Dropdown.classList.contains('show')) {
                Dropdown.classList.remove('show');
              }
            }}}
</script>

Upvotes: 2

Views: 1785

Answers (3)

Mamdouh Saeed
Mamdouh Saeed

Reputation: 2324

function myFunction(dr){
var vis = document.getElementById(dr).style.display == "block" ? "none" : "block";
document.getElementById(dr).style.display = vis;
}  
.button1{
border:none;
border-radius:5px;
padding:10px;
color:white;
margin:5px;
}
.dropmenu-content{
margin:10px;
}
.dropmenu-content a{
text-decoration:none;
color:brown;
box-shadow:1px 1px #ccc;
padding:5px;
border-left:solid 3px green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropmenu">
  <button onclick="myFunction('Dropdown1')" class="button1" style="background-color:#61117F ;">Dropdown1 &#x25BC;</button>
  <div id="Dropdown1" style='display:none;' class="dropmenu-content">
    <a href=" http://www.apple.com/">Apple</a>
    <a href="https://www.google.com/">google</a>
  </div>
</div>

<div class="dropmenu">
  <button onclick="myFunction('Dropdown2')" class="button1" style="background-color:#d7791b ;">DropDown2 &#x25BC;</button>
  <div id="Dropdown2" style='display:none;' class="dropmenu-content">
    <a href=" https://www.yahoo.com/">Yahoo</a>
    <a href="https://www.facebook.com/">FB</a>
  </div>
</div>

Upvotes: 1

Kodie Grantham
Kodie Grantham

Reputation: 2041

Your JavaScript can be simplified a lot. Just pass the clicked button to the function and then find it's sibling with the class dropmenu-content. After you have that, all you need to do is toggle the show class.

window.myFunction = function(e) {
  var dropdown = e.parentNode.getElementsByClassName('dropmenu-content')[0];
  dropdown.classList.toggle('show');
}
.dropmenu-content {
  display: none;
}

.dropmenu-content.show {
  display: block;
}
<div class="dropmenu">
<button onclick="myFunction(this);" class="button1" style="background-color:#61117F ;">Dropdown</button>
  <div id="Dropdown1" class="dropmenu-content">
 <a href=" http://www.apple.com/">Apple</a>
<a href="https://www.google.com/">google</a>
  </div>
</div>

<div class="dropmenu">
<button onclick="myFunction(this);" class="button1" style="background-color:#d7791b ;">DropDown2</button>
  <div id="Dropdown2" class="dropmenu-content">
    <a href=" https://www.yahoo.com/">Yahoo</a>
<a href="https://www.facebook.com/">FB</a>
  </div>
</div>

Upvotes: 1

pieperu
pieperu

Reputation: 2772

You could give your button a data-attribute with the id of the dropdown you want to affect and a css class of something like "trigger-event" to fire the event

<button data-dropdown="Dropdown1" class="trigger-event" style="...">
...
<button data-dropdown="Dropdown2" class="trigger-event" style="...">

and use the data attribute to retrieve the dropdown

$(document).on('click', '.trigger-event', function(){
    var dropdownId = $(this).data("dropdown");//or attr("data-dropdown")
    myFunction(dropdownId);
});

function myFunction(dropdownId) {
    document.getElementById(dropdownId).classList.toggle("show");
    window.onclick = function(event) {
    ...
    }
}

Upvotes: 1

Related Questions