CODEWITHSUNDEEP
htmljquerydrop-down-menu
Mehmood
Mehmood

Reputation: 129

Fancy dropup menue, change icon onclick jquery

I want a filter icon which dropup on click and also change icon. In the dropup menu I have checkboxes (They are basically filters). I want dropup to remain open if someone toggle checkboxes but when user click on filter icon (which is now cross icon ) it should close dropup and change its icon back to filter. I have created drop up and also icon is changed on click, but when someone click on filter menu it closes. I know it is because of toggle function but I don't know how else I can make this work properly.

Also how can I animate this a bit. Would be very appreciative.

.filter {
    position: fixed;
    left: 20px;
    bottom: 40px;
    font-size: 40px;
    z-index: 1000;
  }
  .filter-dropup {
    position: relative;
    display: inline-block;
  }
  .filter-dropup-content {
    display: none;
    position: absolute;
    bottom: 50px;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 10px;
  }
  .filter-dropup-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  .show {
    display: block;
  }
 <div class="filter">
<div class="filter-dropup">
  <a href="#"><i class="fas fa-filter filter-icon"></i></a>
  <div class="filter-dropup-content">
        <div>
  <input type="checkbox" id="scales" name="scales"
         checked>
  <label for="scales">Scales</label>
</div>
       <div>
  <input type="checkbox" id="scales" name="scales"
         checked>
  <label for="scales">Scales</label>
</div>
         <div>
    <input type="checkbox" id="scales" name="scales"
           checked>
    <label for="scales">Scales</label>
    </div>
  </div>
</div>


$(".filter").click(function () {
    $(".filter-icon", this).toggleClass("fas fa-times fas fa-filter");
    $(".filter-dropup-content").toggleClass("show", 1000);
  });

Here is jsfiddle

Upvotes: 0

Views: 415

Answers (1)

Raxel21
Raxel21

Reputation: 413

First of all, the id and name must be unique, otherwise it always points to the first element that matches the id. I added the handler class to the a label, so that it would work as a button. Sorry about my English, but it's not my native language. jsfiddle I hope I've helped you.

.filter {
    position: fixed;
    left: 20px;
    bottom: 40px;
    font-size: 40px;
    z-index: 1000;
}
.filter-dropup-content {
    display: none;
    position: absolute;
    bottom: 50px;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 10px;
}

<div class="filter">
    <a href="#" class="handler">
        <i class="fas fa-filter"></i>
    </a>
    <div class="filter-dropup-content">
        <div>
            <input type="checkbox" id="scales" name="scales" checked />
            <label for="scales">Scales</label>
        </div>
        <div>
            <input type="checkbox" id="scales_2" name="scales_2" checked />
            <label for="scales_2">Scales_2</label>
        </div>
        <div>
            <input type="checkbox" id="scales_3" name="scales_3" checked />
            <label for="scales_3">Scales_3</label>
        </div>
    </div>
</div>

The previous JavaScript closed the menu when you clicked on it, because you were using the .filter container as a button that made everything inside the filter close the menu, since you're using jQuery we can use the fadeToggle function to animate the menu.

$('.handler').on('click', function () {
    $(this).find('i').toggleClass('fa-times');
    $('.filter-dropup-content').fadeToggle();
});

Upvotes: 1

Related Questions