Dropdown блок javascript

Question

У меня есть проблема с выпадающим меню javascript. Мне нужно показать содержимое после нажатия заголовка окна.

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> 

Это не работает вообще. Может кто-нибудь сказать мне, почему?

И второй вопрос. Есть ли шанс изменить JS, чтобы он мог сохранить «статус» окна (показанного или скрытого) в файлах cookie? Таким образом, пользователь может оставить его, закрыть страницу, и при следующем посещении он останется, когда он покинул его?

Answer 1

У вас есть два опечатка.

Идентификатор div должен быть cookiemenu_dropdown на div, но в настоящее время cookiemenu_dropwdown.

Также цвет red не #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>

Answer 2

Изменить ваши правила CSS в

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

display: block из .ShowCookieBox был быть перезаписаны display: none из div.cookiemenu_content правил, когда был применен ShowCookieBox класс.

Проверить jsfiddle