ayoola-solomon/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Smava Collapsible</title>
    <style>

      .collapsible__content {
        max-height: 20em;
        height: auto;
        margin: 0 auto;
        overflow: hidden;
        -webkit-transition: max-height 0.6s ease-out;
        -moz-transition: max-height 0.6s ease-out;
        -o-transition: max-height 0.6s ease-out;
        transition: max-height 0.6s ease-out;
      }

      .hidden {
        max-height: 1em;
      }

    </style>
  </head>
  <body>
    <div class="collapsible">
      <button class="collapsible__toggle">
        Show me the content
      </button>
     <div class="collapsible__content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius ante id mattis tempor. Suspendisse eu nisi dictum, venenatis diam vel, faucibus magna. Sed non purus nibh. Vivamus ultricies non tellus nec pharetra. Proin sollicitudin tincidunt egestas. Sed vitae elementum risus. Sed ac ultrices nisl, eu egestas augue. Donec vel tortor eu justo laoreet eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed venenatis diam non sapien vulputate, sed porttitor nunc egestas. Ut placerat, arcu ut sodales tincidunt, libero ipsum viverra odio, et suscipit leo felis a velit. Quisque sed metus interdum, lacinia massa vitae, ultrices nulla. Aenean finibus tincidunt lobortis. Quisque et mauris nec ex luctus cursus. Phasellus sem tortor, fermentum quis urna ac, suscipit scelerisque mauris.
        </p>
        <p>
          Suspendisse potenti. Nulla vestibulum imperdiet commodo. Ut id tortor pulvinar, sodales lorem at, volutpat neque. Quisque tempor arcu arcu. Vivamus porttitor sit amet metus ultrices ullamcorper. Nulla rutrum cursus aliquet. Praesent sem quam, imperdiet eu mi non, aliquam sagittis purus. Sed interdum non libero nec placerat. Maecenas nec blandit ex, vel eleifend ligula. Aliquam sem massa, congue non massa sit amet, porttitor sollicitudin mauris. Integer lobortis laoreet justo id luctus. Aliquam quis commodo mi, sit amet accumsan ante. Cras in vulputate nisl.
        </p>
      </div>
    </div>
    <script>
      var buttonDiv = document.querySelector('.collapsible__toggle');
      var content = document.querySelector('.collapsible__content');

      buttonDiv.addEventListener("click", function() {
        content.classList.toggle('hidden');
      });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Smava Collapsible</title>
	<style>

	.collapsible__content {
	max-height: 20em;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
	-webkit-transition: max-height 0.6s ease-out;
	-moz-transition: max-height 0.6s ease-out;
	-o-transition: max-height 0.6s ease-out;
	transition: max-height 0.6s ease-out;
	}

	.hidden {
	max-height: 1em;
	}

	</style>
	</head>
	<body>
	<div class="collapsible">
	<button class="collapsible__toggle">
	Show me the content
	</button>
	<div class="collapsible__content">
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius ante id mattis tempor. Suspendisse eu nisi dictum, venenatis diam vel, faucibus magna. Sed non purus nibh. Vivamus ultricies non tellus nec pharetra. Proin sollicitudin tincidunt egestas. Sed vitae elementum risus. Sed ac ultrices nisl, eu egestas augue. Donec vel tortor eu justo laoreet eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed venenatis diam non sapien vulputate, sed porttitor nunc egestas. Ut placerat, arcu ut sodales tincidunt, libero ipsum viverra odio, et suscipit leo felis a velit. Quisque sed metus interdum, lacinia massa vitae, ultrices nulla. Aenean finibus tincidunt lobortis. Quisque et mauris nec ex luctus cursus. Phasellus sem tortor, fermentum quis urna ac, suscipit scelerisque mauris.
	</p>
	<p>
	Suspendisse potenti. Nulla vestibulum imperdiet commodo. Ut id tortor pulvinar, sodales lorem at, volutpat neque. Quisque tempor arcu arcu. Vivamus porttitor sit amet metus ultrices ullamcorper. Nulla rutrum cursus aliquet. Praesent sem quam, imperdiet eu mi non, aliquam sagittis purus. Sed interdum non libero nec placerat. Maecenas nec blandit ex, vel eleifend ligula. Aliquam sem massa, congue non massa sit amet, porttitor sollicitudin mauris. Integer lobortis laoreet justo id luctus. Aliquam quis commodo mi, sit amet accumsan ante. Cras in vulputate nisl.
	</p>
	</div>
	</div>
	<script>
	var buttonDiv = document.querySelector('.collapsible__toggle');
	var content = document.querySelector('.collapsible__content');

	buttonDiv.addEventListener("click", function() {
	content.classList.toggle('hidden');
	});
	</script>
	</body>
	</html>