Display and hide mobile menu on clicking icon-CodePudding

I have gone through the various questions on this subject, i tried without success. I'm a beginner.

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

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  id="menu">
                            <svg  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  id="show">
                        <ul >
                            <li >
                                Destinations
                                <span >
                                    <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 >
                                Suggestions
                                <span >
                                    <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 >
                                Services
                            </li>
                            <li >
                                Concept
                            </li>
                            <li >
                                Infos
                            </li>
                        </ul>
                    </div>

CodePudding user response：

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.