Creating Drop Down Page

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

Solution 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>

Solution 2:

With 3 div elements you can get a result like the one pictured. From the picture it looks like one div is wrapping around two other div elements, a div element that already has some information and a div element that will grow/shrink in size through appending/removing elements when the user presses the dropdown button.

Here is a working example:

var extraInformation = document.getElementById('infoLong');
var dropdown = document.getElementById('dropdown');

// The extra info that will be appended into the infoLong div
var someHeading = document.createElement('h4');
  someHeading.innerHTML = 'Detailed Game Information';
  someHeading.style.background = '#C58AC5';
var teamOneInfo = document.createElement('p');
  teamOneInfo.innerHTML = 'Team 1: Lost';
  teamOneInfo.style.background = '#FF516B';
var teamTwoInfo = document.createElement('p');
  teamTwoInfo.innerHTML = 'Team 2: Won';
  teamTwoInfo.style.background = '#3FBFBF';

// Should add more detailed information when the dropdown button
// is pressed only if the infoLong div is empty
dropdown.addEventListener('click', function(){
  if(extraInformation.children.length === 0){
    extraInformation.appendChild(someHeading);
    extraInformation.appendChild(teamOneInfo);
    extraInformation.appendChild(teamTwoInfo);
  }else{
    while(extraInformation.firstChild){
      extraInformation.removeChild(extraInformation.firstChild);
    }
  }
});

#infoShort {
  background: #3FBFBF;
}

p {
  margin: 0;
}

h4 {
  margin: 0;
}

<div id='gameInfoContainer'>
  <div id='infoShort'>
    <h3>Game Summary</h3>
    <button id='dropdown'>Dropdown</button>
  </div>
  <div id='infoLong'></div>
</div>