Div hide/show javascript that hides one div and displays another

Question

I have a show/hide javascript, magicShow:

function magicShow(e) {
    ele = document.getElementById(e);
    if (ele.style.display == "none") {
        ele.style.opacity = 0;
        ele.style.filter = "alpha(opacity=0)";
        ele.style.display = "";
        valueop = 1;
        setTimeout("fadeIn()", openingdelay)
    } else {
        valueop = 9;
        setTimeout("fadeOut()", closingdelay)
    }
}

function fadeOut() {
    if (valueop < 1) {
        ele.style.display = "none";
        return false
    }
    ele.style.opacity = valueop / 10;
    ele.style.filter = "alpha(opacity=" + valueop * 10 + ")";
    valueop = valueop - 1;
    setTimeout("fadeOut()", closingspeed)
}

function fadeIn() {
    if (valueop > 10) {
        return false
    }
    ele.style.opacity = valueop / 10;
    ele.style.filter = "alpha(opacity=" + valueop * 10 + ")";
    valueop = valueop + 1;
    setTimeout("fadeIn()", openingspeed)
}
var openingdelay = 100;
var closingdelay = 100;
var openingspeed = 15;
var closingspeed = 15

On two adjacent links I put this code:

<a href="#" onClick="magicShow('showdiv-A'); return false;">Link A</a>
<a href="#" onClick="magicShow('showdiv-B'); return false;">Link B</a>

When clicked/tapped, each link displays a hidden div. Tap the link again and the div disappears. Both divs can be open or both closed at the same time. I put Div A and Div B in different positions so they don't overlap. But would it be possible to have the divs overlap and modify the script behavior so that:

• if div A is visible and you tap link B, div A disappears and div B appears;
• if div B is visible and you tap link A, div B disappears and div A appears;

The answer here has a JSFiddle which doesn't do that, but it might be a basis for a solution. The solution should have two links, and not lose the function of tapping to make a div disappear. Also, I'd prefer to do this without jquery.

PS: Questions like this have been asked here, but always (I think) involving a single link.

Answer 1

Here's a way to do it. Instead of the display property, I'm using visibility though. This will keep your objects in place even if it's invisible. Everything's pretty straight-forward. Tell the function which object you want to show and in the switch block we figure out what' needs to be hidden. As a side note: In case you're wondering, it's possible to give parameters to a callback function of setTimout() after the delay parameter.

 var openingdelay = 100; var closingdelay = 100; var openingspeed = 15; var closingspeed = 15 function magicShow(action) { var elementToShow; var elementToHide; switch (action) { case "showdiv-A": elementToShow = document.getElementById("showdiv-A"); elementToHide = document.getElementById("showdiv-B"); break; case "showdiv-B": elementToHide = document.getElementById("showdiv-A"); elementToShow = document.getElementById("showdiv-B"); break; } if (elementToHide.style.visibility == "visible") { setTimeout(fadeOut, closingdelay, elementToHide, 10) } setTimeout(fadeIn, openingdelay, elementToShow, 0) } function fadeOut(element, alpha) { if (alpha < 1) { element.style.visibility = "hidden"; return false; } element.style.opacity = alpha / 10; element.style.filter = "alpha(opacity=" + alpha * 10 + ")"; alpha = alpha - 1; setTimeout(fadeOut, closingspeed, element, alpha); } function fadeIn(element, alpha) { if (alpha > 10) { return false; } element.style.opacity = alpha / 10; element.style.filter = "alpha(opacity=" + alpha * 10 + ")"; element.style.visibility = "visible"; alpha = alpha + 1; setTimeout(fadeIn, openingspeed, element, alpha); } 

 <a href="#" onClick="magicShow('showdiv-A'); return false;">Link A</a> <a href="#" onClick="magicShow('showdiv-B'); return false;">Link B</a> <div id="showdiv-A" style="visibility:hidden;">I'm div 1</div> <div id="showdiv-B" style="visibility:hidden;">I'm div 2</div> 

Answer 2

Here is a simpel way of doing it

  function magicShow(e) { ele = document.getElementById(e); if (ele.style.display == "none") { ele.style.opacity = 0; ele.style.filter = "alpha(opacity=0)"; ele.style.display = ""; valueop = 1; setTimeout("fadeIn()", openingdelay) } else { valueop = 9; setTimeout("fadeOut()", closingdelay) } if (e == "showdiv-B") { document.getElementById("showdiv-A").style.display = "none" } else if (e == "showdiv-A") { document.getElementById("showdiv-B").style.display = "none" } } function fadeOut() { if (valueop < 1) { ele.style.display = "none"; return false } ele.style.opacity = valueop / 10; ele.style.filter = "alpha(opacity=" + valueop * 10 + ")"; valueop = valueop - 1; setTimeout("fadeOut()", closingspeed) } function fadeIn() { if (valueop > 10) { return false } ele.style.opacity = valueop / 10; ele.style.filter = "alpha(opacity=" + valueop * 10 + ")"; valueop = valueop + 1; setTimeout("fadeIn()", openingspeed) } var openingdelay = 100; var closingdelay = 100; var openingspeed = 15; var closingspeed = 15 

 <a href="#" onClick="magicShow('showdiv-A'); return false;">Link A</a> <a href="#" onClick="magicShow('showdiv-B'); return false;">Link B</a> <div style="display: none;" id="showdiv-A"> Showing div-A </div> <div style="display: none;" id="showdiv-B"> Showing div-B </div>