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

Could you add a codepen/fiddle/plunkr/whatever to demonstrate your issue? — sg.cc
– sg.cc, Commented Jan 30, 2016 at 1:09
my issue is i cant open the element its clickable but dosnt want to expand the div to display the iframe that lies in it — TheLiveitup34
– TheLiveitup34, Commented Jan 30, 2016 at 1:12

Andrew · Accepted Answer · 2016-01-30 03:17:13Z

2

button.onclick = fucntion(); {

You misspelled the word function

answered Jan 30, 2016 at 3:17

Andrew

827 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

TheLiveitup34 Over a year ago

even though i changed the spelling it still doesn't work

fmc Over a year ago

@TheLiveitup34 - are you using Bootstrap?

TheLiveitup34 Over a year ago

@Landslyde no im not im using custom code for my who website and what it should do when you click on the cog is that it should add the varible of .drop to the id and make it drop down and overlay with 1000px but it doesnt want to interact with the <a> for the cog

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related