Toggle Visibility (Automatically causing one div element to hide when another is rendered visible)

Question

Essentially what I am trying to do is create a website that has all of its content on the home page but only has some of the content visible at any one time. The way I read to do this is through toggling visibility.

The problem I am having is that: Assume the home page, when you first visit the website is blank (the way I want it to be). Lets say you click on the "about us" link. All of a sudden the about us section becomes visible (the way I want it to be). Now the problem that I have come across is when I know lets say click on the "products" link, I want the "products" content to become visible and the "about us" content to become invisible again. (Essentially creating the illusion of opening a new page within the same page).

Here is the code I have come up with so far. I can make certain div elements visible and invisible (onclick) but I can't figure out how to make sure only one div element is visible at any one time.

<script type="text/javascript">
function toggleVisibility() {
document.getElementById("about").style.display = "";
if(document.getElementById("about").style.visibility == "hidden" ) {
    document.getElementById("about").style.visibility = "visible";
}
else {
document.getElementById("about").style.visibility = "hidden";
}
}
</script>

<script type="text/javascript">
function toggleVisibility1() {
document.getElementById("products").style.display = "";
if(document.getElementById("products").style.visibility == "hidden" ) {
    document.getElementById("products").style.visibility = "visible";
}
else {
document.getElementById("products").style.visibility = "hidden";
}
}
</script>

The links to make the JavaScript work looks like this:

< href="#" onclick="toggleVisibility();">About

< href="##" onclick="toggleVisibility1();"> Products

score 4 · Answer 1 · answered Mar 26 '13 at 12:05

here is another, simple function

<script type="text/javascript">
function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}
</script>
<a href="#" onclick="toggle_visibility('foo');">if you click here, #foo will change visibility</a>
<div id="foo">blablabla</div>

Jeff B · Answer 2 · 2010-11-23T23:34:43.833

Without jQuery, you would want to do something like this:

<style type="text/css">
    .content {
        display: none;
    }
    #about {
        display: block;
    }
</style>

<script type="text/javascript">

    function toggleVisibility(selectedTab) {

         // Get a list of your content divs
         var content = document.getElementsByClassName('content');

         // Loop through, hiding non-selected divs, and showing selected div
         for(var i=0; i<content.length; i++) {
              if(content[i].id == selectedTab) {
                    content[i].style.display = 'block';
              } else {
                    content[i].style.display = 'none';
              }
         }

    }
</script>

<a href="#" onclick="toggleVisibility('about');">About</a>
<a href="#" onclick="toggleVisibility('products');"> Products</a>

<div id="about" class="content">About stuff here</div>
<div id="products" class="content">Product stuff here</div>

Example here: http://jsfiddle.net/frDLX/

jQuery makes this much easier, but if you are beginning with JavaScript, sometimes you want to see the programmatic code, so you can tell what is going on.

Thanks, that did help somewhat, but what I am really trying to accomplish is more or less the functionality that www.fuelbrandinc.com has. I was to have everything invisible at first and then reveal one section at a time depending on what link you click. — Corey K, Nov 23 '10 at 23:19
Just remove the `#about { display: block; }` from the style definition. — Jeff B, Nov 23 '10 at 23:33

score 1 · Answer 3 · answered Nov 23 '10 at 22:16

This is exactly what jquery makes easier. Take this very simple example of what you're trying to achieve:

<style type="text/css">
    .section {
        display: none;
    }
</style>
<script type="text/javascript">

    function toggleVisibility(newSection) {
        $(".section").not("#" + newSection).hide();
        $("#" + newSection).show();
    }
</script>

<a href="#" onclick="toggleVisibility('about');">About</a>

<a href="#" onclick="toggleVisibility('products');"> Products</a>

<div id="about" class="section">about section</div>
<div id="products" class="section">products section</div>

score 1 · Answer 4 · answered Nov 23 '10 at 22:18

1

Simple solution is like this:

    <script type="text/javascript">
    function toggleVisibility(divid) {
    if (divid="about"){
        document.getElementById("about").style.visibility = "visible";
        document.getElementById("products").style.visibility = "hidden";
    }
    else if (divid="products")
    {
        document.getElementById("products").style.visibility = "visible";
        document.getElementById("about").style.visibility = "hidden";
    }
    }
    </script>


< href="#" onclick="toggleVisibility('about');">About

< href="##" onclick="toggleVisibility1('products');"> Products

answered Nov 23 '10 at 22:18

Websirnik

1,372
3
21
35

1

This is a good non-jquery version of the answer I gave. Except you're checking equality of strings using = instead of == – mmurch Nov 23 '10 at 22:22
will this work if I wanted to use 5 different sections instead of just 2? – Corey K Nov 23 '10 at 23:14
this will work with more sections, but for each new section you would have to add a line of code to each of the else/if's to maintain it. If you use my jquery answer, you wouldn't have to do anything extra to add/remove sections. – mmurch Nov 23 '10 at 23:42

score 0 · Answer 5 · edited May 23 '17 at 12:18

0

use CSS display: property

element disappear

document.getElementById("products").style.display = "none";

element appear and is displayed as block (default for div)

document.getElementById("products").style.display = "block";

I posted sample code here: jQuery: menus appear/disappear on click - V2

PS

Here you can find nice examples about differences between display and visibility: http://wiw.org/~frb/css-docs/display/display.html

edited May 23 '17 at 12:18

Community

1
1

answered Nov 23 '10 at 22:13

RobertO

2,655
1
20
18

if you're using jQuery, you can use $('#products').css('display', 'none'); – Chris Nov 23 '10 at 22:15

Toggle Visibility (Automatically causing one div element to hide when another is rendered visible)

5 Answers5

Linked