Pull down menu using JavaScript CSS

Question

I am trying to make a pull down menu which gets displayed and vanishes on a click.

JavaScript

function visible(x) {
    var apple = document.getElementById('pulldown'+x);
    if (apple.style.display = "none")
    {
        apple.style.display = "block";
    }

}

This is working fine, but upon adding this to the above code -

else {
     apple.style.display = "none";
}

The onclick event only works once.

what about working this in jquery? – Juliver Galleto Mar 11 '15 at 01:41 — Juliver Galleto, Mar 11 '15 at 01:41
@CodeDemon How is using Jquery better than this? – user3788040 Mar 11 '15 at 01:47 — user3788040, Mar 11 '15 at 01:47

score 0 · Answer 1 · edited Mar 11 '15 at 01:37

0

use == inside the if condition rather than =

if (apple.style.display == "none")

edited Mar 11 '15 at 01:37

Sumner Evans

8,951
5
30
47

answered Mar 11 '15 at 01:36

Diego López

1,559
1
19
27

You should use `===`. [See this SO question](http://stackoverflow.com/questions/359494/does-it-matter-which-equals-operator-vs-i-use-in-javascript-comparisons). `==` does a type conversion so `'0' == 0` is true. However, you (almost) always want to use `===` which will give `'0' === 0` is false. – Sumner Evans Mar 11 '15 at 01:40

score 0 · Answer 2 · answered Mar 11 '15 at 02:14

how about achieve it with the power of jquery?

first we have element (anchor tag) that serve as a trigger and then the second element is the menu which hidden

html

<a href="#" class="pulldowntrigger">Pull down</a>
<div class="themenu" style="display: none;">menu content here</div>

jquery

// when click the anchor tag with a class pulldowntrigger
$('.pulldowntrigger').click(function(){
// check if the class themenu is hidden
if ($(this).next('.themenu')).is(":hidden"){
// yes its hidden! then slide it down (show)
$(this).next('.themenu').slideDown();
}else{
//nah! its not, then slide it up (hide)
$(this).next('.themenu').slideUp();
}
});

Pull down menu using JavaScript CSS

2 Answers2