Dropdown javascript block

Question

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?

it's not working - the single most unhelpful phrase you can use. What isn't working? What is it not doing? What is it doing that it shouldn't be doing? Are you getting console errors in your browser developer tools? Help us to help you — freefaller
– freefaller, Commented Apr 22, 2016 at 17:01

Wowsk · Accepted Answer · 2016-04-22 16:32:47Z

1

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>

answered Apr 22, 2016 at 16:32

Wowsk

3,6852 gold badges20 silver badges30 bronze badges

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

3 Comments

Johnczek Over a year ago

My bad when I've edited this post. In my source code it's right. It's not working at all.

Wowsk Over a year ago

Make sure you change the #red in the CSS too.

Johnczek Over a year ago

Oh thanks. But when i try to change cookiemenu_content hide (display: none;) and after javascrips use toogle display:block; It's not working. Do you know why? thanks for response

spaceman · Accepted Answer · 2016-04-22 17:06:12Z

0

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

edited Apr 22, 2016 at 17:06

answered Apr 22, 2016 at 16:58

spaceman

1,1678 silver badges16 bronze badges

Collectives™ on Stack Overflow

Dropdown javascript block

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related