Question

I’m working on a script which will go along with my already in place website. Basically, when you click the Show/Hide button, it shows an overlay over the content div. Then there’s an option to hide the entire div, both overlay, content, and container.

Problem is, you have to click the hide link twice for it to hide all the divs.

I have a working example here:

http://jsfiddle.net/charlescarver/8c3VZ/3/

EDIT: I updated the jsFiddle with the correct version of the JS. I had the incomplete one in there before.

Also, there’s more to the script that allows cookies, I just didn’t include it to reduce the amount of code.

Answer 1

Change your toggle_visibility() code to this to let jQuery’s .toggle() and .css() do most of the work for you:

<script>
    function toggle_visibility(a) {
        var item = $("#" + a);
        item.toggle();
        $.cookie("disp" + a, item.css("display"));
    }
</script>

The reason it wasn’t working is that b.style.display in your original code only returns inline styles. It does not return styles set by CSS rules. If you really wanted to get that style, you could use jQuery’s .css("display") method. But, in this case, you can just use .toggle() and let that do all the work for you.