CODEWITHSUNDEEP
javascripthtmlcssbutton
ImWorkingHere
ImWorkingHere

Reputation: 3

How to open dropdown button by clicking on text?

I'm setting a dropdown button on my website, but I get this weird thing. The dropdown part only shows when I click on the box of the button, but not when I click on "Tools". What am I doing wrong? Thanks so much!

(Ok, W3 school will not take the code to save, so I have to do this manually)

    /* When the user clicks on the button, 
    toggle between hiding and showing the dropdown content */
    function myFunction() {
      document.getElementById("myDropdown").classList.toggle("show");
    }
    
    // Close the dropdown if the user clicks outside of it
    window.onclick = function(event) {
      if (!event.target.matches('.dropbtn')) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
          }
        }
      }
    }
    .dropdown {
      position: relative;
      display: inline-block;
    }
    .dropdown-content {
      display: none;
      position: absolute;
      min-width: 160px;
      overflow: auto;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }
    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
    button.dropbtn{
      background:none;
      border:none;
      padding:0;
    }
    .dropdown a:hover {background-color: #ddd;}
    .show {display: block;}
    <body>
    <div class="column-outlet">
      <button onclick="myFunction()" class="dropbtn"><strong>Tools</strong></button>
      <div id="myDropdown" class="dropdown-content">
        <li class="force-css"><a href="#">Blok 1</a></li>
        <li class="force-css"><a href="#">Blok 1</a></li>
        <li class="force-css"><a href="#">Blok 1</a></li>
      </div>
    </div>

Upvotes: 0

Views: 3228

Answers (2)

Uncoke
Uncoke

Reputation: 1902

Don't use tag into button but text-weight in CSS and use UL tag to create the list

/* When the user clicks on the button, 
    toggle between hiding and showing the dropdown content */
    function myFunction() {
      document.getElementById("myDropdown").classList.toggle("show");
    }
    
    // Close the dropdown if the user clicks outside of it
    window.onclick = function(event) {
      if (!event.target.matches('.dropbtn')) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
          }
        }
      }
    }
.dropdown {
      position: relative;
      display: inline-block;
     
    }
    .dropdown-content {
      display: none;
      position: absolute;
      min-width: 160px;
      overflow: auto;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }
    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
    button.dropbtn{
     font-weight: 700;
      background:none;
      border:none;
      padding:0;
    }
    .dropdown a:hover {background-color: #ddd;}
    .show {display: block;}
<body>
    <div class="column-outlet">
      <button onclick="myFunction()" class="dropbtn">Tools</button>
      <ul id="myDropdown" class="dropdown-content">
        <li class="force-css"><a href="#">Blok 1</a></li>
        <li class="force-css"><a href="#">Blok 1</a></li>
        <li class="force-css"><a href="#">Blok 1</a></li>
      </ul>
    </div>

Upvotes: 0

Girish
Girish

Reputation: 36

Remove the strong tag from the button.

<body>
<div class="column-outlet">
  <button onclick="myFunction()" class="dropbtn">Tools</button>
  <div id="myDropdown" class="dropdown-content">
    <li class="force-css"><a href="#">Blok 1</a></li>
    <li class="force-css"><a href="#">Blok 1</a></li>
    <li class="force-css"><a href="#">Blok 1</a></li>
  </div>
</div>
</body>

Upvotes: 2

Related Questions