Solved

toggle buttons like radio buttons with javascript

Posted on 2015-02-20
3
94 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 43

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

756 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