CODEWITHSUNDEEP
javascripthtmlcss
Johnczek
Johnczek

Reputation: 657

Dropdown javascript block

I have a problem with javascript dropdown clicking menu. I need show some content after clicking header of box.

HTML

<div id='cookiemenu'>
                <div class='cookiemenu_header' onclick='ShowCookieBox()'>
                    Test
                </div>
                <div id="cookiemenu_dropwdown" class='cookiemenu_content'>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mollis magna sed scelerisque hendrerit.
                </div>
</div>

CSS

  #cookiemenu {
  width:100%;
  overflow: hidden;
  display:block;

}
#cookiemenu div.cookiemenu_header {
  width:100%;
  display:block;
  margin-top: 0px;
  background-color: #0B3954;
  color:#FFFFFF;
  text-align: center;
  height: 25px;
  font-size: 20px;
  line-height: 25px;
}
#cookiemenu div.cookiemenu_header:hover, div.cookiemenu_header:target {
  cursor: hand;
  text-decoration: underline;
}
div.cookiemenu_content {
}
.ShowCookieBox {
  display:block;
  border:2px solid #red;
}

JS

<script>
 function ShowCookieBox() {
    document.getElementById("cookiemenu_dropdown").classList.toggle("ShowCookieBox");
 }
</script>

It's not working at all. Can someone tell me why?

And the second question. Is there any chance to change the JS so It could save "status" of box (showed or hidden) in cookies? So user can leave it, close page and on the next visit it stays as he leaved it?

Upvotes: 1

Views: 290

Answers (2)

spaceman
spaceman

Reputation: 1167

Change your CSS rules to 

div.cookiemenu_content.ShowCookieBox {
    display: block;
    border:2px solid red;
}
div.cookiemenu_content {
    display: none;
}

The display: block from .ShowCookieBox was being overwritten by display: none from the div.cookiemenu_content rules when the ShowCookieBox class was applied.

Check the jsfiddle

Upvotes: 0

Wowsk
Wowsk

Reputation: 3675

You have two typos.

The id of the div should be cookiemenu_dropdown on the div, but it is currently cookiemenu_dropwdown.

Also the color is just red not #red.

function ShowCookieBox() {
 document.getElementById("cookiemenu_dropdown").classList.toggle("ShowCookieBox");
}
 #cookiemenu {
  width:100%;
  overflow: hidden;
  display:block;

}
#cookiemenu div.cookiemenu_header {
  width:100%;
  display:block;
  margin-top: 0px;
  background-color: #0B3954;
  color:#FFFFFF;
  text-align: center;
  height: 25px;
  font-size: 20px;
  line-height: 25px;
}
#cookiemenu div.cookiemenu_header:hover, div.cookiemenu_header:target {
  cursor: hand;
  text-decoration: underline;
}
div.cookiemenu_content {
}
.ShowCookieBox {
  display:block;
  border:2px solid red;
}
<div id='cookiemenu'>
  <div class='cookiemenu_header' onclick='ShowCookieBox()'>
    Test
  </div>
  <div id="cookiemenu_dropdown" class='cookiemenu_content'>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mollis magna sed scelerisque hendrerit.
  </div>
</div>

Upvotes: 1

Related Questions