Solved

toggle buttons like radio buttons with javascript

Posted on 2015-02-20
3
90 Views
Last Modified: 2015-02-20
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:

when i run my page
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:

when i click Button1
Button2 and Button 3 work just like Button1.

When I click Button 2 it looks like this:

when i click Button2

When I click Button 3 it looks like this:

when i click Button3
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?
0
Comment
Question by:maqskywalker
3 Comments
 
LVL 14

Expert Comment

by:Michael Dyer
ID: 40622353
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>
0
 
LVL 1

Author Comment

by:maqskywalker
ID: 40622360
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.
0
 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 40622370
Have a look at this, and ask if there's something you don't understand:

http://jsfiddle.net/ChrisStanyon/yjc1gxg6/

Rather than using the toggle() method, it simply adds and removes a class that defines whether the div should be displayed or not. It stores the related div id in a data attribute of the button so it know which one to show.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now