Reputation: 559

Jquery button toggle show hide div

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

Upvotes: 0

Answers (4)

Steve Clanton

Reputation: 4314

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

Upvotes: 0

user1636522

Reputation:

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);
}

Upvotes: 1