Dropdown menu CSS on click jquery

Question

I have a on click dropdown menu composed by divs with content.

It have a title and when click with jquery menu shows. It works correctly i just want to animate it. (To down and to up).

The principal div have a position relative because i need to show childs under title with position absolute.

$(".item").click(function() {
  if ($(this).hasClass('active')) {
    $(this).removeClass('active');
  } else {
    $(this).addClass('active');
  }
})

.item {
  position: relative;
}

.item .item_group {
  display: none;
}

.item.active .item_group {
  display: block;
  position: absolute;
  width: 100%;
  background: #fff;
  z-index: 100;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item active">
  <h6>Title</h6>
  <div class="item_group">
    <div class="item_child">
      content
    </div>
    <div class="item_child">
      content
    </div>
    <div class="item_child">
      content
    </div>
  </div>
</div>

Remember : It works correctly, but i want animate to down and to up for cool result

Rory McCrossan · Accepted Answer · 2018-12-17 10:31:15Z

Firstly, note for future reference that your if statement to check the visibility of the element then add/remove the class can be replaced with just a single call to toggleClass()

With regard to your requirement, if you simply want to animate the transition of the element when it's displayed or hidden, you could use slideToggle():

$(".item").click(function() {
  $(this).find('.item_group').slideToggle();
})

.item {
  position: relative;
}

.item .item_group {
  display: none;
  position: absolute;
  width: 100%;
  background: #fff;
  z-index: 100;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item active">
  <h6>Title</h6>
  <div class="item_group">
    <div class="item_child">
      content
    </div>
    <div class="item_child">
      content
    </div>
    <div class="item_child">
      content
    </div>
  </div>
</div>

This can also be achieved in CSS alone using transition:

$(".item").click(function() {
  $(this).toggleClass('active');
})

.item {
  position: relative;
}

.item .item_group {
  height: 0;
  position: absolute;
  width: 100%;
  background: #fff;
  z-index: 100;
  transition: height 0.5s;
  overflow: hidden;
}

.item.active .item_group {
  height: 55px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item active">
  <h6>Title</h6>
  <div class="item_group">
    <div class="item_child">
      content
    </div>
    <div class="item_child">
      content
    </div>
    <div class="item_child">
      content
    </div>
  </div>
</div>

Collectives™ on Stack Overflow

Dropdown menu CSS on click jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related