Jquery button toggle show hide div

Question

I have these two divs on a page with two buttons beneath them to control hiding and showing them respectively.

<div class="threeSixtyContainer">


    <div class="toggle360" style="display: block;" id="Blue">Im Blue</div>
    <div class="toggle360" style="display: none;" id="Red">Im Red</div>

    <ul class="flashlinks">

        <li id="" class="flashlinks"><a href="#Blue" onclick="toggle_visibility('Blue');">Blue</a></li>
        <li id="" class="flashlinks"><a href="#Red" onclick="toggle_visibility('Red');">Red</a></li>

     </ul>

</div>

I am using this javascript at the moment on the onclick of link.

function toggle_visibility(id) {

    var e = document.getElementById(id);

    console.log(e);
    if(e.style.display == 'none') {
        e.style.display = 'block';
    } else {
        e.style.display = 'none';
    }
}

It works however how do I make it so that clicking one button will disable the other. So clicking blue will show the blue div and hide the red div, then disable the button and enable the other button so the same can be donw but in reverse.

I have made a fiddle with the code i am using on my page which works, but on the fiddle its not? not sure why, ill post it anyway.

EDIT _ Fiddle Now Working. Thanks.

JSFIDDLE

Please have a look at [hide all elements](http://stackoverflow.com/questions/4644673/hide-all-elements-with-class-using-plain-javascript) — Anusha, Dec 17 '13 at 10:43

score 1 · Answer 1 · answered Dec 17 '13 at 10:34

1

You can't execute your js method before the elements get loaded. so wrap your code in head/body

check this fiddle

answered Dec 17 '13 at 10:34

Praveen

55,303
33
133
164

score 1 · Accepted Answer · 2013-12-17T11:18:03.960

Here is a possible solution (no jQuery) : http://jsfiddle.net/wared/A6w5e/.

As you might have noticed, links are not "disabled", I simply save the id of the DIV which is currently displayed in order to check the requested id before toggling : if (current !== id).

Another thing to note is that toggle_visibility is overwritten (only once) inside itself. It might look weird, but it's just a way to create a closure in order to enclose the variable named current inside a private context. The goal is to avoid polluting the parent scope.

Lastly, I've modified the original code to hide all divs except the one targeted by id.

function toggle_visibility(id) {
    var current = 'Blue';
    (toggle_visibility = function (id) {
        var div, l, i;
        if (current !== id) {
            current = id;
            div = document.getElementsByClassName('toggle360');
            l = div.length;
            i = 0;
            for (; i < l; i++) {
                div[i].style.display = div[i].id === id ? 'block' : 'none';
            }
        }
    })(id);
}

Hi, thanks for the reply, it works perfectly. Ill mark when i can — user3004208, Dec 17 '13 at 11:30

score 0 · Answer 3 · answered Dec 17 '13 at 10:35

0

Wrap your code in head or body.

You are executing your code before DOM is created

Fiddle Demo

enter image description here

answered Dec 17 '13 at 10:35

Tushar Gupta - curioustushar

58,085
24
103
107

Steve Clanton · Answer 4 · 2013-12-17T11:22:38.067

A couple people have commented why it doesn't work in fiddle. To answer the question....

It easy to toggle visibility using jquery if there are only two divs:

$(document).delegate('.flashlinks a', 'click', function () {
  $('.toggle360').toggle();
});

I would use a css class to disable the links. Then I would select what to do with the click based on if the class was present:

$(document).delegate('.flashlinks a:not(".disabled")', 'click', function () {
  $('.toggle360').toggle();
  $('.flashlinks a').toggleClass("disabled");
});

$(document).delegate('.flashlinks a.disabled', 'click', function () {
  e.preventDefault();
});

and in my css I would have something like

.disabled {
    color: black;
    text-decoration:none;
}

jsfiddle

Jquery button toggle show hide div

4 Answers4