CODEWITHSUNDEEP
javascripthtmlcss
Assane
Assane

Reputation: 11

Display and hide mobile menu on clicking icon

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 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>

Upvotes: 0

Views: 562

Answers (1)

mrocha
mrocha

Reputation: 90

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.

Upvotes: 1

Related Questions