Hide/show elements with javascript

Question

I have tried to search for an answer but haven't quite yet found the right one. And I must do this with javascript, so don't give my any jQuery answers. My skills in javascript are also very low, since I've just begun to learn it.

This is what I must do: I have three buttons, each one has its own content that's within a div (so three different divs that is). When the site loads for the first time I shall only see content from the first button. If I click another button, I shall only see this new button's content and everything else must disappear (except the three buttons of course).

I have tried to play around with document.getElementById("button1").style.visibility = "hidden"; within a function and so on, but I still can't really get it to work, especially when I try to connect the function to the html document.

Any tips?

Answer 1

Hope the below helps

<button onclick="javascript:show(1)">One</button>
<button onclick="javascript:show(2)">Two</button>
<button onclick="javascript:show(3)">Three</button>

<div id="content1">content one</div>
<div id="content2" style="display:none">content two</div>
<div id="content3" style="display:none">content three</div>

<script>
function show(dv){
   hideAll();
   if(dv == '1'){
            document.getElementById("content1").style.display = "block";
   }else if(dv == '2'){
              document.getElementById("content2").style.display = "block";
   }else{
        document.getElementById("content3").style.display = "block";
   }
}

function hideAll(){
  document.getElementById("content1").style.display = "none";
  document.getElementById("content2").style.display = "none";
  document.getElementById("content3").style.display = "none";
}

</script>

Answer 2

just did it on jsfiddle http://jsfiddle.net/6EGT2/. first create a function to show and hide divs

function hideDiv(divid)
{
    document.getElementById(divid).style.visibility= 'hidden';
}

function showDiv(divid)
{
    hideDiv('div1');
    hideDiv('div2');
    hideDiv('div3');
    document.getElementById(divid).style.visibility = '';
}

now html:

<input type='button' value ='button1' onclick='showDiv("div1")'>
<input type='button' value ='button2' onclick='showDiv("div2")'>
<input type='button' value ='button3' onclick='showDiv("div3")'>

<div id='div1'>content 1</div>
<div id='div2'>content 2</div>
<div id='div3'>content 3</div>

Answer 3

A few notes:

• You need to watch for the click event on whatever needs to be clicked
• When clicked, you can determine which div should be shown. visibility: hidden or display: none
• Make sure the javascript is executing after the html elements have loaded, otherwise it won't assign the click handlers etc.

Answer 4

Here's one way to do it with plain javascript that uses common code for each button, no javascript in your HTML and data attributes:

HTML:

<div id="buttonContainer">
<button data-content="content1">Content 1</button>
<button data-content="content2">Content 2</button>
<button data-content="content3">Content 3</button>
</div>

<div id="contentContainer">
<div id="content1">Showing Content 1</div>
<div id="content2">Showing Content 2</div>
<div id="content3">Showing Content 3</div>
</div>

Javascript:

var buttons = document.querySelectorAll("#buttonContainer button");

for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", function() {
        var contentItem = this.getAttribute("data-content");
        var contents = document.querySelectorAll("#contentContainer div");
        for (var j = 0; j < contents.length; j++) {
            contents[j].style.display = "none";
        }
        document.getElementById(contentItem).style.display = "block";
    });
}

Working demo: http://jsfiddle.net/jfriend00/rcDXX/

Explanation:

1. Create a div that contains the buttons.
2. Create a div that contains the various content areas.
3. Create CSS rules that show/hide the content for the appropriate starting state.
4. Put a data attribute on each button that tells you which content area it should show so you can use generic code for all the buttons.
5. Get all the buttons into a nodeList.
6. Set a click event handler on each button.
7. In that click handler, get the content id that should be shown for that button.
8. Hide all the content areas by setting their style to style.display = "none"
9. Show the desired content area.

FYI, here's a little more advanced version of the code that uses a helper function: http://jsfiddle.net/jfriend00/aqMLt/

Answer 5

It seems like you're toggling the visibility of the button and not the content. What is the ID of your content div?

provided:

<div id="containerDiv">
    <div id="div1">blahblah</div>
    <div id="div2">blahblah</div>
    <div id="div3">blahblah</div>
</div>

Then just set the buttons to go to a function like "toggleVisibility". I tested this and it will work from IE 5.5 and later, Firefox, Chrome 1.0 and Safari.

function toggleVisibility( id ){

    var containerDiv = document.getElementById("containerDiv");
    var innerDivs = containerDiv.getElementsByTagName("DIV");

    for(var i=0; i<innerDivs.length; i++)
    {
        if ( i == id ){
            innerDivs[i].style.visibility = "visible";
            innerDivs[i].style.display = "";
        }
        else{
            innerDivs[i].style.visibility = "hidden";
            innerDivs[i].style.display = "none";        
        }
    }
}

toggleVisibility( 0 );