CODEWITHSUNDEEP
jquerycsshideshow
user1568790
user1568790

Reputation: 113

How can I hide one div and show another with jQuery?

I have 2 divs, one set to display:none; in the css when the page loads

I have two corresponding links. When the user clicks on link1 I would like to show div1 and hide div2. And when the user clicks on link2 I would like to show div2 and hide div1.

I have not been able to get this to work! Any help much appreciated. S

Upvotes: 2

Views: 35859

Answers (7)

Igor Laszlo
Igor Laszlo

Reputation: 742

That fiddle helped me, it is really understandable : http://jsfiddle.net/bipen/zBdFQ/1/

$("#link1").click(function(e) {
  e.preventDefault();
  $("#div1").slideDown(slow);
  $("#div2").slideUp(slow);
});

$("#link2").click(function(e) {
  e.preventDefault();
  $("#div1").slideUp(slow);
  $("#div2").slideDown(slow);
});

Upvotes: 0

Kaustubh
Kaustubh

Reputation: 1505

Firstly,please provide the HTML for your question, whenever you ask one here.

Secondly, you could do something like..

<script>
$(document).ready(function(){
    $("#div1").hide();
    $("#link1").on("click",function(){
        $("#div1").show();
        $("#div2").hide();
    });
    $("#link2").on("click",function(){
        $("#div2").show();
        $("#div1").hide();
    });
});
</script>

Upvotes: 4

Besnik
Besnik

Reputation: 6529

Here an example:

$(function () {
  $(".div1, .div2").hide();

  $(".link1, .link2").bind("click", function () {
    $(".div1, .div2").hide();        

    if ($(this).attr("class") == "link1")
    {
      $(".div1").show();
    }
    else
    {
      $(".div2").show();
    }
  });

});

And here is the Demo

Upvotes: 6

azzy81
azzy81

Reputation: 2269

Have a look at this example it might help you out: http://jsfiddle.net/MUtPy/2/ ^^ There are many ways to do this in Jquery but this example should certainly get u started =)

Upvotes: 0

WhoaItsAFactorial
WhoaItsAFactorial

Reputation: 3558

Are you deadset on jquery? This can be done simply with normal old JavsScript.

function switchVisible() {

if (document.getElementById['div1'].style.visibility == 'visible') {
    document.getElementById['div1'].style.visibility = 'hidden';
    document.getElementById['div2'].style.visibility = 'visible';
}
else {
    document.getElementById['div1'].style.visibility = 'visible';
    document.getElementById['div2'].style.visibility = 'hidden';
}

}

Then have in your link1:

<a href="/blah" onclick="javascript:switchVisible();">

Upvotes: 1

wirey00
wirey00

Reputation: 33661

Depending on your HTML structure

if something like this

​<a href='#'>link1</a>
<a href='#'>link2</a>
<div> div for link 1</div>
<div> div for link 2</div>

then jQuery code would look like this

$('a').click(function(e){
    $('div').eq($(this).index()).show();
    $('div').not($('div').eq($(this).index()).hide();
});

http://jsfiddle.net/NXdyb/

Upvotes: 2

Ohgodwhy
Ohgodwhy

Reputation: 50767

This is a very simple principle...you can achieve it many ways, this is just one example.

Ignore the selectors, I'm lazy.

The HTML ->

<a href="#"> Show Div 1 </a> | <a href="#"> Show Div 2 </a>
<br/><br/>
<div id="div1"> Div 1 </div>
<div id="div2"> Div 2 </div>

The CSS -> 

#div1{
  display:none;   
}

The jQuery ->

$('a:eq(0)').click(function(){
  $('#div1').toggle();
  $('#div2').toggle();    
});
$('a:eq(1)').click(function(){
  $('#div2').toggle();
  $('#div1').toggle();   
});

Upvotes: 0

Related Questions