How to Display the Drop down list after clicking on Caret only?

Question

I have one HTML design in that button/Portlet. I have one fa fa-Caret, After clicking on that caret it should display the drop-down list (which is hidden by default)

I have written a Jquery code to remove the hidden class of that drop-down list, But it's not working properly.

 $(".Caret").click(function () { if ($(".dropdown-menu").hasClass("hidden")) $(".dropdown-menu").removeClass("hidden"); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <li> <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"><i id="carett" class="fa fa-caret-down pull-right hidden Caret"></i > ' + ButtonName + '</a > <ul id="ddlist1" class="dropdown-menu hidden"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> </ul> </li>

Whenever I click that Button's Caret symbol only that drop-down list must appear, and if I switch to another Button's Caret(Second button I didn't mention) that drop down must come, I have a static drop down, but I am adding into the number of buttons (Generated dynamically)

Answer 1

Note:- You need to add span class and inside span class you can write <i> and add toggle class on <span> tag resolve this issue.

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> <div class="dropdown"> <span class="btn dropdown-toggle" data-toggle="dropdown"> </span> <ul id="ddlist1" class="dropdown-menu hidden"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> </ul> </div>

Answer 2

Click event triggered from 'anchor' tag. Also you could use the inline style 'display' property too.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>
  <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"><i id="carett" class="fa fa-caret-down pull-right hidden Caret"></i > ' + ButtonName + '</a >
  <ul id="ddlist1" class="dropdown-menu" style="display:none">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
  </ul>
</li>

<script>
$(".dropdown-toggle").click(function () {
  if ($(".dropdown-menu").css("display") == "none")
    $(".dropdown-menu").css("display", "block");
});
</script>