I have gone through the various questions on this subject, i tried without success. I’m a beginner. I need help please. ps: my english is not good.
I tried to replace the "headbar_view" class having located in the having for id "show". It is hidden by default. Then with the JavaScript code by retrieving the "id" of the element concerned by referencing with querySelector I want to replace the previous class "headbar_view" by "headbar_view show" which must display the menu according to the CSS code
Find below my HTML, CSS and JS code
// JS
const menu = document.querySelector('#menu');
const displayMobileMenu = document.querySelector('#show');
menu.onClick = function() {
displayMobileMenu.classList.toggle('headbar_view show');
}/* CSS */
.headbar_view {
display: none;
background: #fff;
}
.headbar_view.show {
display: block !important;
}<!-- Blade html -->
<div class="headbar_head_item hidden-lg" id="menu">
<svg class="headbar_head_icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 384.97 384.97" style="enable-background:new 0 0 384.97 384.97;" xml:space="preserve">
<g>
<g>
<path d="M12.03,84.212h360.909c6.641,0,12.03-5.39,12.03-12.03c0-6.641-5.39-12.03-12.03-12.03H12.03
C5.39,60.152,0,65.541,0,72.182C0,78.823,5.39,84.212,12.03,84.212z"/>
<path d="M372.939,180.455H12.03c-6.641,0-12.03,5.39-12.03,12.03s5.39,12.03,12.03,12.03h360.909c6.641,0,12.03-5.39,12.03-12.03
S379.58,180.455,372.939,180.455z"/>
<path d="M372.939,300.758H12.03c-6.641,0-12.03,5.39-12.03,12.03c0,6.641,5.39,12.03,12.03,12.03h360.909
c6.641,0,12.03-5.39,12.03-12.03C384.97,306.147,379.58,300.758,372.939,300.758z"/>
</g>
<g>
</svg>
</div>
<div class="headbar_view " id="show">
<ul class="headbar_mobile_item_container">
<li class="headbar_mobile_item">
Destinations
<span class="headbar_mobile_item_next">
<svg version="1.1" id="arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 330.002 330.002" style="enable-background:new 0 0 330.002 330.002;" xml:space="preserve">
<path id="XMLID_226_" d="M233.252,155.997L120.752,6.001c-4.972-6.628-14.372-7.97-21-3c-6.628,4.971-7.971,14.373-3,21
l105.75,140.997L96.752,306.001c-4.971,6.627-3.627,16.03,3,21c2.698,2.024,5.856,3.001,8.988,3.001
c4.561,0,9.065-2.072,12.012-6.001l112.5-150.004C237.252,168.664,237.252,161.33,233.252,155.997z"/>
</svg>
</span>
</li>
<li class="headbar_mobile_item">
Suggestions
<span class="headbar_mobile_item_next">
<svg version="1.1" id="arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 330.002 330.002" style="enable-background:new 0 0 330.002 330.002;" xml:space="preserve">
<path id="XMLID_226_" d="M233.252,155.997L120.752,6.001c-4.972-6.628-14.372-7.97-21-3c-6.628,4.971-7.971,14.373-3,21
l105.75,140.997L96.752,306.001c-4.971,6.627-3.627,16.03,3,21c2.698,2.024,5.856,3.001,8.988,3.001
c4.561,0,9.065-2.072,12.012-6.001l112.5-150.004C237.252,168.664,237.252,161.33,233.252,155.997z"/>
</svg>
</span>
</li>
<li class="headbar_mobile_item">
Services
</li>
<li class="headbar_mobile_item">
Concept
</li>
<li class="headbar_mobile_item">
Infos
</li>
</ul>
</div>>Solution :
You have to select something that is always present.
const displayMobileMenu = document.querySelector('.headbar_view');
Toggle works as an on and off function. This will add the class "show" if is not there, then remove it, if it is already there.
menu.addEventListener('click', function() {
displayMobileMenu.classList.toggle('show');
})
Remember, as a rule, classes start with a dot (.) inside javascript. Also, ids cannot repeat in the same HTML.