Question

I have two divs that are hidden from view until corresponding image links are clicked on. As is, both divs can be shown at the same time by clicking on one and then the other and I do not want this. I am trying to write an if statement that says if one has been clicked on the other will not display, but I have had no luck. Here is the javascript I am up with that does not work:

 $("#about").click(function () {
    if ($("#aboutdetails").fadeIn("slow") == 'true') {
    $("#contact").css({'display': 'none'});
    }
$("#aboutdetails").click("slow",function () {
        $(this).hide();     
    });
});


$("#contact").click(function () {
    if ($("#contactdetails").fadeIn("slow") == 'true') {
    $("#about").css({'display': 'none'});
    }
$("#contactdetails").click("slow",function () {
        $(this).hide();
    });
});

and here is the original code before I attempted the if statement:

 $("#about").click(function () {
    $("#aboutdetails").fadeIn("slow", function() {
    $("#aboutdetails").click("slow",function () {
            $(this).hide();
        });
    });
});


$("#contact").click(function () {
   $("#contactdetails").fadeIn("slow", function() {
    $("#contactdetails").click("slow",function () {
           $(this).hide();
        });
   });
});

neither are very eloquent as I am still learning!

Thanks for any help in advance

Answer 1

So you have two different divs named “div1” and “div2” with links “link1” and “link2″…

$('#link1').click(function() {
    $('#div1').show();
    $('$div2').hide();
});

$('#link2').click(function() {
    $('#div2').show();
    $('$div1').hide();
});

Is that what you are trying to do? Click on link1 -> show div1, hide div2. Click on link2 -> show div2 hide div1?

I’m not sure if that is what you wanted. If not please try and clarify your question.

Edit with code example from your site: Try this

$("#about").click(function () {
  $("#aboutdetails").fadeIn("slow", function() {

  });
  $("#contactdetails").hide();
});


$("#contact").click(function () {
$("#contactdetails").fadeIn("slow", function() {

});
$("#aboutdetails").hide();
});

$("#aboutdetails").click(function() {
   $("#aboutdetails").hide();
});
 $("#contactdetails").click(function() {
    $("#contactdetails").hide();
});