CODEWITHSUNDEEP
javascripthtml
user3672754
user3672754

Reputation:

javascript, Display text when pusing button (multiple buttons) but only one text at the time

I'm using this javascript to display text when clicking a button in a website:

<script type="text/javascript">
        function toggleMe(a)
        {
        var e=document.getElementById(a);
        if(!e)return true;
        if(e.style.display=="none")
            {e.style.display="block"}
        else
            {e.style.display="none"}
        return true;
        }
    </script>

and i'm calling the script with <A Onclick="return toggleMe('content')" >[Website Content]</A>

The problem is that i have three "buttons" (help, gpgkey, content) and i would like that only one text be displayed at the time. I've never done java before and Im not even sure of totally understanding the first code.

This is one of my attempts

<script type="text/javascript">
    function toggleMe(a)
    {
    var e=document.getElementById(a);
    if(!e)return true;

    if(e==document.getElementById("content")
        {
        var f=document.getElementById("help");
        var g=document.getElementById("gpgkey");
        }

    if(e==document.getElementById("help")
        {
        var f=document.getElementById("content");
        var g=document.getElementById("gpgkey");
        }

    if(e==document.getElementById("gpgkey")
        {
        var f=document.getElementById("content");
        var g=document.getElementById("help");
        }

    if(e.style.display=="none")
        {
        e.style.display="block"

        if(f.style.display!="none")
            {f.style.display="none"}

        if(g.style.display!="none")
            {g.style.display="none"}            
        }
    else
        {e.style.display="none"}

    return true;
    }

Upvotes: 0

Views: 318

Answers (1)

Ke Vin
Ke Vin

Reputation: 2024

function toggleMe(a) {
    var eContent = document.getElementById("content"),
        eHelp    = document.getElementById("help"),
        eGPGKey  = document.getElementById("gpgkey");
    if(!eContent || !eHelp || !eGPGKey)
        return;

    if (a === "content" && eContent.style.display === "none") {
        eContent.style.display = "block";
        eHelp.style.display    = "none";
        eGPGKey.style.display  = "none";
    }
    else if (a === "help" && eHelp.style.display === "none") {
        eContent.style.display = "none";
        eHelp.style.display    = "block";
        eGPGKey.style.display  = "none";
    }
    else if (a === "gpgkey" && eGPGKey.style.display === "none") {
        eContent.style.display = "none";
        eHelp.style.display    = "none";
        eGPGKey.style.display  = "block";
    }
    else if (a === "content") {
        eContent.style.display = "none";
    }
    else if (a === "help") {
        eHelp.style.display = "none";
    }
    else if (a === "gpgkey") {
        eGPGKey.style.display = "none";
    }
}

http://jsfiddle.net/Z68p7/

Upvotes: 1

Related Questions