asked on

toggle buttons like radio buttons with javascript

I have a html page called TestPage.html
This is the code for it.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test Index Page</title>
        
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>

    <script type="text/javascript">
        function ShowDiv1OnButtonClick() {
            $('#Div1').toggle();
            return false;
        }
        function ShowDiv2OnButtonClick() {
            $('#Div2').toggle();
            return false;
        }
        function ShowDiv3OnButtonClick() {
            $('#Div3').toggle();
            return false;
        }
    </script>
    <style type="text/css">
        body {
            background-color: #809d90;
        }

        a:link {
            color: #0000FF;
        }

        a:visited {
            color: #ff0000;
        }

        a:hover {
            color: #0094ff;
        }

        a:active {
            color: #b6ff00;
        }

        .MainDiv {
            background-color: #bceefa;
            width: 500px;
            height: 220px;
            margin: 130px auto 0 auto;
        }

        .MainDivTable {
            width: 100%;
            height: 100%;
        }

        .MainDivText {
            font-family: Arial;
            font-size: 24px;
            font-weight: bold;
            color: #000000;
        }

        .PageText {
            font-family: Arial;
            font-size: 12px;
            font-weight: normal;
            color: #000000;
        }


        .TableHeaderCol {
            text-align: center;
        }

        .TableCol1 {
            /*border: 1px solid #0000ff;*/
            text-align: center;
        }

        .TableCol2 {
            /*           top - right - bottom - left                 */
            /*border: 1px solid #00ff21;*/
        }

        .Div1Style {
            background-color: #d4dd61;
            width: 500px;
            height: 130px;
            margin: -25px auto 0 auto;
            /*    by default the div is hidden on page load   */
            display: none;
            text-align: center;
        }

        .Div2Style {
            background-color: #f8bcf0;
            width: 500px;
            height: 130px;
            margin: -25px auto 0 auto;
            /*    by default the div is hidden on page load   */
            display: none;
            text-align: center;
        }

        .Div3Style {
            background-color: #a29ff2;
            width: 500px;
            height: 130px;
            margin: -25px auto 0 auto;
            /*    by default the div is hidden on page load   */
            display: none;
            text-align: center;
        }

        .TitleText1 {
            font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
            font-size: 24px;
            font-weight: bold;
            color: #143664;
            margin-top: 50px;
        }

        .Div1Table {
            width: 100%;
            height: 100%;
        }

        .Div1TableCol1 {
            text-align: center;
        }

        .Div2Table {
            width: 100%;
            height: 100%;
        }

        .Div2TableCol1 {
            text-align: center;
        }

        .Div3Table {
            width: 100%;
            height: 100%;
        }

        .Div3TableCol1 {
            text-align: center;
        }
    </style>


</head>
<body>
    <div class="MainDiv">
        <table class="MainDivTable">
            <tr>
                <td colspan="2" class="TableHeaderCol"><span class="MainDivText">This is the Main Div</span></td>
            </tr>
            <tr>
                <td class="TableCol1">
                    <input type="submit" value="Button1" onclick="ShowDiv1OnButtonClick()" />
                </td>
                <td class="TableCol2">This button launches Div1</td>
            </tr>
            <tr>
                <td class="TableCol1">
                    <input type="submit" value="Button2" onclick="ShowDiv2OnButtonClick()" />
                </td>
                <td class="TableCol2">This button launches Div2</td>
            </tr>
            <tr>
                <td class="TableCol1">
                    <input type="submit" value=" Button3" onclick="ShowDiv3OnButtonClick()" />
                </td>
                <td class="TableCol2">This button launches Div3</td>
            </tr>
        </table>
    </div>

    <br /><br /><br /><br />
    <div id="Div1" class="Div1Style">
        <table class="Div1Table">
            <tr>
                <td class="Div1TableCol1"><span class="TitleText1">This is Div1</span></td>
            </tr>
            <tr>
                <td class="Div1TableCol1"></td>
            </tr>
            <tr>
                <td class="Div1TableCol1"></td>
            </tr>
        </table>
    </div>

    <div id="Div2" class="Div2Style">
        <table class="Div2Table">
            <tr>
                <td class="Div2TableCol1"><span class="TitleText1">This is Div2</span></td>
            </tr>
            <tr>
                <td class="Div2TableCol1"></td>
            </tr>
            <tr>
                <td class="Div2TableCol1"></td>
            </tr>
        </table>
    </div>
    <div id="Div3" class="Div3Style">
        <table class="Div3Table">
            <tr>
                <td class="Div3TableCol1"><span class="TitleText1">This is Div3</span></td>
            </tr>
            <tr>
                <td class="Div3TableCol1"></td>
            </tr>
            <tr>
                <td class="Div3TableCol1"></td>
            </tr>
        </table>
    </div>

</body>
</html>

Open in new window

When I run the page in the browser I get this:

There are 3 buttons.

When I click Button1 once, it displays Div1. Then if i click button 1 again it hides Div1 .
So when I click Button 1 my page looks like this:

Button2 and Button 3 work just like Button1.

When I click Button 2 it looks like this:

When I click Button 3 it looks like this:

The div for all 3 buttons is displayed in the exact same location on the screen.

I want the buttons to behave like radio buttons.

Whenever I press one of the three buttons the other two divs should remain hidden.
Only the Div for the button I press should be displayed.

Right now If I click Button1 then Div1 is displayed. But I have to click Button1 again two hide it.

Here is a demo video

As you can see in the video, if I click on Button1 and then Button2 and then Button 3. If places the Divs one below the other.

The way its supposed to work is,
when i press Button1 ...Div1 is displayed,
then when I press Button2 right after that, Div1 should be hidden and Div 2 is displayed.
Then if I click Div 3 right after that, Div 2 should be hidden and Div 3 should be displayed.

Anyone know what I have to revise in my javascript?

Michael Dyer

Radio buttons have to have the same name - look at this sample:

<HTML>
<HEAD>
<TITLE>Test Index Page</TITLE>
</HEAD>
<BODY bgColor="#FFFFFF">
<form method="post" action="" name="division">
<blockquote>
<p>
<input type="radio" name="DIV" value="DIV 1" checked>
DIV 1<br>
<input type="radio" name="DIV" value="DIV 2">
DIV 2<Br>
<input type="radio" name="DIV" value="DIV 3">
DIV 3<Br>
</p>
<P><INPUT Type="Submit" Value="Select your division!"></P>
</blockquote>
</form>
</BODY>
</HTML>

maqskywalker

ASKER

I don't want to use radio buttons.

I want to use buttons just as I am doing in my example.

I want the buttons to "behave" like radio buttons.

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial