2

I am having a challenge. 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

1
  • You will need to use javascript code to achieve that and change the div class based on what button was clicked Aug 1, 2012 at 14:10

7 Answers 7

6

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

0
4

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>
2

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/

1

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();">
0
0

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();   
});
0

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 =)

0

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);
});

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.