创建下拉页面

Question

I am after creating a drop down page like on my examples below:

This is how I would like it to show when the arrow on the side is cliked.

How would I make something like this and is there any examples any where for me to study to help me make this ?

Answer 1

If you can use jquery you can play with hasClass, addClass and removeClass to change the height of the submenu

Working Demo.

$(".btn").click(function() {
  if ($(".menu").hasClass("dropped")) {
    $(".menu").removeClass("dropped");
  } else {
    $(".menu").addClass("dropped");
  }
});

.menu {
  height: 0;
  overflow: hidden;
  transition: all 0.5s ease 0s;
}

.dropped {
  height: inherit;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="btn">
  Dropdown
</button>
<div class="menu">
  <p>Stufss...</p>
  <p>Stufss...</p>
  <p>Stufss...</p>
  <p>Stufss...</p>
  <p>Stufss...</p>
  <p>Stufss...</p>
</div>

</div>