Js/jquery (hide Div, Show Div On Click)

I have two buttons. I have two divs I want to show. Each divs have different content. I want both divs to only take up the same amount of space on the page. I want it so on page lo

Solution 1:

All the initial CSS and onload stuff aside and you're using jquery, I think you're looking for something like

$("#button2").click(function(){
    $("#div1").hide();
    $("#div2").show();
})

Solution 2:

page load:

$('#div2').hide();

click link:

$('#div1').hide(); $('#div2').show();

Solution 3:

see the sample code here... hope this helps :)

http://jsfiddle.net/jpHzk/2/

Note: Hi Kyle, I modified my code, added a few lines on it courtesy of jessegavin

Solution 4:

In a click handler, call $('#div1').hide() and $('#div2').show().

Solution 5:

function showdiv(id){
    $("#container div").hide(0); //Hide all DIV's within container
    $("#container #" + id).show(); //Show DIV with certain ID
}

Then in HTML...

<ahref="javascript:;"onclick="javascript:showdiv('about');">About Us</a><ahref="javascript:;"onclick="javascript:showdiv('contact');">Contact</a>

You should add event listeners, but I guess you did it something like this..