trying to create a dropdown menu but it is not working for the javascript

Question

This is what it looks like when cliked on

This is the expectation when clicked on what i used to display this is the :hover event but i want it clickable

Please help if anything possable as soon as you can to fix the Javascript coding

 var content = document.getElementById("settingsBar"); var button = document.getElementById("show-more"); button.onclick = function() { if (content.className == "drop") { content.className = ""; } else { content.className = "drop"; } }; 

 #settingsBar { width: 100%; position: fixed; z-index: 1; background-color: #000; max-height: 56px; overflow: hidden; -webkit-transition: all 0.7s; -moz-transition: all 0.7s; transition: all 0.7s; } #settingsBar.drop { max-height: 1000px; color: #fff; -webkit-transition: all 0.7s; -moz-transition: all 0.7s; transition: all 0.7s; } #show-more i { padding-left: 48%; padding-top: 15px; color: #fff; -webkit-transition: color 0.7s; -moz-transition: color 0.7s; transition: color 0.7s; } 

 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div id="settingsBar"> <a href="#" id="show-more"><i class="material-icons large">settings</i></a> <br/> <iframe src="http://www.pigigram.com/account_settings.php" scrolling="no" frameborder="0" width="100%"></iframe> </div> 

Basicly What i want is to have it open the content to display the iframe and allow them to use the settings

Answer 1

button.onclick = fucntion(); {

你拼错了单词功能