CODEWITHSUNDEEP
javascripthtmlbuttonfont-awesome
gBrugna
gBrugna

Reputation: 11

FontAwesome icons on divs that have onclick javascript functions

I am trying to build a dropdown menu in which, near the string that identifies the menu, I put an icon from fontawesome of an arrow (caret-down).

Then I put in the button div the onclick event that calls the javascript code that make the menu visible.

It works fine, but only when I click on the div (background) or on the normal string (not the fontawesome one). When I click on the fontawesome's icon it simply doesn't call the javascript script. I tried to use a button, a span, an anchor instead of the div, but it never worked properly ...

Here is the HTML:

    <ul>
        <li><a href="#contacts">contacts</a></li>
        <li>
          <a href="javascript:void(0)" class="dropbtn" onClick="dropDown('dropFeauture');">feautures&nbsp;<i class="fa fa-caret-down" aria-hidden="true"></i></a>
          <div class="dropdown-content dropdown" id="dropFeauture" >
            <a href="#">News</a>
            <!-- other things -->
          </div>
        </li>
    </ul>

And here is my simple Javascript:

function dropDown(drop) {
    document.getElementById(drop).classList.toggle("show");
}

Does anyone know what I am doing wrong? Thanks

Upvotes: 0

Views: 1502

Answers (1)

andreas
andreas

Reputation: 16936

As far as I can see, your code works:

function dropDown(drop) {
  document.getElementById(drop).classList.toggle("show");
}
#dropFeauture {
  display: none;
}
.show {
  display: block !important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<ul>
  <li><a href="#contacts">contacts</a>
  </li>
  <li>
    <a href="javascript:void(0)" class="dropbtn" onClick="dropDown('dropFeauture');">feautures&nbsp;<i class="fa fa-caret-down" aria-hidden="true"></i></a>
    <div class="dropdown-content dropdown" id="dropFeauture">
      <a href="#">News</a>
      <!-- other things -->
    </div>
  </li>
</ul>

Upvotes: 1

Related Questions