Edit in JSFiddle

var openingButton = document.getElementsByTagName("button")[0];
var list = document.getElementsByTagName("ol")[0];
openingButton.addEventListener("click", function() {
	list.classList.toggle("openedList");
	console.log("works");
});

<!-- A heading -->
<h2>A Made up list</h2>

<!-- A list -->
<button>Click on me!</button>
<ol>
	<li>Cat</li>
	<li>Dog</li>
	<li>
		<h3>Something!</h3>
	</li>
</ol>

<div id="Log"></div>

* {font-family: monospace; font-size: 1.1em;}
h2 {color: #A9DE87; border-bottom: 2px solid; box-shadow: 2px 4px 0 -2px gray;}
ol {height: 0; margin-top: -1em; opacity: 0; overflow: hidden; transition: all 0.5s ease;}
li {line-height: 1.5em;}
.openedList {height: auto !important;  margin-top: 0 !important; opacity: 1 !important;}
button {background: none; border: 2px solid; cursor: pointer;}