Hiding and Showing Elements with JavaScript or jQuery

Question

I have an arrow on my site that I'd like if onclick, it hides one element, and shows another. Hitting it again, will hide the element that was shown and show the element that was hidden.

For example, I have

<div id="arrow"><a href="#">▾</a></div>

<div id="ad"></div>

<div id="description">Hidden</div>
<div id="nav">Also Hidden</div>

So at first, the ad is showing, and then one you've clicked the arrow, I'd like the ad to hide, and then unhide the description and nav.

Did you at least try to come up with a solution to this on your own? — adeneo, Sep 09 '12 at 21:37
Yes, I tried using jQuery, onclick and using functions but couldn't get it to work. — user1658756, Sep 09 '12 at 21:38
Of course is possible without jQuery. `elem.style.display = 'none'` — elclanrs, Sep 09 '12 at 21:38
jQuery is written in JavaScript. Everything possible in jQuery is possible with JavaScript. — Hamish, Sep 09 '12 at 21:44
possible duplicate of [javascript hide/show element](http://stackoverflow.com/questions/6242976/javascript-hide-show-element) — Hamish, Sep 09 '12 at 21:44
If you tried the jQuery way and could not get it to work (assuming you tried `toggle()`), what makes you think using just JavaScript is going to be easier to implement? Specially that jQuery is less code and cross-browser compatible. Don't get me wrong, I'm all for just using JavaScript but if it is purely for reasons that you could not get jQuery working I think you will run into the same issues using just JavaScript. — Nope, Sep 09 '12 at 21:46

João Silva · Accepted Answer · 2012-09-09T21:55:51.230

4

With jQuery, use .toggle():

$("#arrow").click(function () {
   $("#ad, #description, #nav").toggle();
});

DEMO.

With plain JavaScript, you need to toggle the display property of each element manually:

document.getElementById("arrow").onclick = function () {
    var description = document.getElementById("description"); 
    var nav = document.getElementById("nav"); 
    var ad = document.getElementById("ad");
    if (ad.style.display == 'none') {
      ad.style.display = '';
      nav.style.display = 'none';   
      description.style.display = 'none';
    } else {
      ad.style.display = 'none';
      nav.style.display = '';   
      description.style.display = '';
    }
};

DEMO.

edited Sep 09 '12 at 21:55

answered Sep 09 '12 at 21:39

João Silva

89,303
29
152
158

@JoãoSilva That works perfect. I don't mind using jQuery so looks like that's the way. Thanks! – user1658756 Sep 09 '12 at 21:45
@JeremyJStarcher: The question was initially tagged with jQuery. I've updated my answer to use plain JavaScript though. Though OP has just said that he can use jQuery. – João Silva Sep 09 '12 at 21:49
1

+1 for JavaScript solution as well as showing jQuery solution which demonstrates the benefits quite clearly. Also, OP did say in original comments `Yes, I tried using jQuery, onclick and using functions but couldn't get it to work.` which would indicate that jQuery is fine but OP simply did not know how to implement it. – Nope Sep 09 '12 at 22:23

The Alpha · Answer 2 · 2012-09-09T22:06:51.030

1

Try this (Since you asked for plain javascript)

window.onload=function(){
    var arrow=document.getElementById('arrow').getElementsByTagName('a')[0];
    arrow.onclick=function(){
        var ad=document.getElementById('ad');
        var description=document.getElementById('description');
        var nav=document.getElementById('nav');
        if(ad.style.display=='none')
        {
            ad.style.display='block';
            description.style.display='none';
            nav.style.display='none';
        }
        else
        {
            ad.style.display='none';
            description.style.display='block';
            nav.style.display='block';
        }
        return false;

    };
};

DEMO.

edited Sep 09 '12 at 22:06

answered Sep 09 '12 at 21:47

The Alpha

143,660
29
287
307

1

+1 for just JavaScript solution. Note to OP though: That is why jQuery is so very handy. The DEMO doesn't work in IE8 for example and also, using jQuery you are replacing all that code with a few lines using `toggle()`. In addition `toggle()` remembers what display settings you had. If you had `display: block` then this is exactly what `toggle()` will set it back to when showing the element again. If it was `display: inline` then `toggle()` will set it back to that, and so on. – Nope Sep 09 '12 at 21:52
@FrançoisWahl, Thanks and I agree with you :-) – The Alpha Sep 09 '12 at 21:55
@FrançoisWahl, fixed for IE too and thanks again for pointing me out. – The Alpha Sep 09 '12 at 22:11

score 0 · Answer 3 · answered Sep 09 '12 at 21:55

DEMO

    <input id="x" value="x" />
    <input id="y" value="y" style="visibility:hidden" />
    <input type="button" onclick="toggleBoth()" value="arrow" />

.

function toggle(id){

  var elem = document.getElementById(id);

    if(elem.style.visibility == 'hidden')
        elem.style.visibility = 'visible';
    else
      elem.style.visibility = 'hidden';  
}

 function toggleBoth()
    {
       toggle('x');
       toggle('y');
    }

Hiding and Showing Elements with JavaScript or jQuery

3 Answers3