Function to change display to 'block' from 'none' onclick not working

Question

I am trying to make a clickable dropdown menu using divs instead of uls. I have everything styled properly, but the function I wrote won't toggle the visibility. Any ideas?

HTML

        <a href="#" name="menu" onclick="toggleMenu('menu-1.sub');"><div class="menu-item" id="menu-1"><a aria-haspopup="true" href="#">GET SUPPORT</a>
            <div class="sub-menu" id="menu-1.sub"></div>
        </div></a>



</div>

CSS

 div#mobile_menu_drop-down_test {display:block; position:absolute; top:35px; 
 left:20px; width:40px; height:40px; box-shadow:2px 2px 2px #000; 
background-color:#fff;  background-image:url(Images/hamburger.png); 
background-size:30px 20px; background-repeat:no-repeat; background-
position:center; cursor:pointer;
}

div#mobile_menu_wrapper {
display:none;
position:fixed;
top:0px;
left:0px;
width:100%;
height:auto;
background-color:#ffcb05;
color:#00274c;
box-shadow:2px 2px 5px #000;
font-weight:bold;
font-size:14px;
}

div.menu-item {
display:block; width:100%; border-bottom:1px dashed #5d5d5d; 
padding:15px 0px; text-indent:30px; transition:.2s ease;
}


div.sub-menu {display:none; text-indent:65px; padding:12px 0px; color:#fff;}


}

Javascript

function toggleMenu (id) {
var men = document.getElementById(id);
if (men.style.display =='none')
    men.style.display = 'block';
else
    men.style.display ='none';
}

Your HTML is invalid. You can't nets links. Browsers will try and compensate for this and rearrange your HTML. — j08691
– j08691, Commented Jul 1, 2016 at 16:09
Nested links is why this won't work, good catch thank you! p.s. here is the fiddle - jsfiddle.net/tonyprovenzola/qjepcnLs — tonyp
– tonyp, Commented Jul 1, 2016 at 16:19

Matt Brewerton · Accepted Answer · 2016-07-01 16:27:10Z

1

You're adding your display: none; in your CSS. element.style.display checks the inline styles on the element. Change your javascript to this:

var men = document.getElementById(id);
var display = men.currentStyle ? men.currentStyle.display :
                          getComputedStyle(men, null).display;
if (display == 'none' || men.style.display == 'none')
    men.style.display = 'block';
else
    men.style.display = 'none';
}

IE uses .currentStyle, but other browsers don't (hence the ternary operator). Other browsers use getComputedStyle(), so we are using the correct version depending on our browser.

edited Jul 1, 2016 at 16:27

answered Jul 1, 2016 at 16:21

Matt Brewerton

8961 gold badge7 silver badges26 bronze badges

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

Comments

pzelenovic · Accepted Answer · 2016-07-01 16:11:17Z

0

In your css you do not have a rule that defines the element with id "menu-1.sub".

You have a definition for #mobile_menu_drop-down_test and #mobile_menu_wrapper.

In your css file you need to define #menu-1.sub and set it's initial display property to equal 'none'.

Then the function will be able to eventually evaluate men.style.display === 'none' to be true, and will then proceed to set men.style.display property to have the value 'block'.

answered Jul 1, 2016 at 16:11

pzelenovic

4183 silver badges15 bronze badges

Collectives™ on Stack Overflow

Function to change display to 'block' from 'none' onclick not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related