Reputation: 105

HTML divs toggle visibility not workings

Hi I am trying to get only one of my 3 divs to show once the appropriate button is clicked but nothing happens could some one help me out? Thanks.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CS:GO Team Hub</title>
    <style type="text/css">

        html{
            width:100%;
            height:100%;
        }

        body { /* Used to set the size of the webpage so you don't get 2 pictures */
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        p {
            font-family:"Trebuchet MS", Helvetica, sans-serif;
            font-size: 1em;
        }

        h1 {
            font-family:"Trebuchet MS", Helvetica, sans-serif;
            font-size: 2em;
        }

        .center {
            text-align: center;
            width: 100%;
            border:1px solid #8AC007;

        }

        .empty_spc{
            width: 100%;
            border:1px solid #8AC007;
            padding-top: 3%;
        }

        .container{
            width: 50%;
            height: 10%;
            border: 1px solid #090dc0;
            padding: 1% 25% 1% 25%;
        }

        .same_row_div{
            width: 26%;
            height: 100%;
            float: left;
            display: block;
            margin: 0 auto;
            text-align: center;
            border:1px solid #8AC007;
        }

        button{
            height: 100%;
            width: 100%;
            vertical-align: middle;
            background-color: darkred;
            margin:auto;
            border-color: #bc3315;
        }

        input:focus{
            outline: none;
        }

        a{
            font-family:"Trebuchet MS", Helvetica, sans-serif;
            font-size: 2em;
            color:white;
        }

        .settings_block{
            height: 30% ;
            width: 70%;
            padding: 5% 15%;
            border:1px solid #8AC007;
        }

    <script type="text/javascript">

        function toggle_visibility(id) {
            var e = document.getElementById(id);

            switch (e){
                case e='bo1s':
                    e.style.display = 'block';
                    'bo3s'.style.display = 'none';
                    'bo5s'.style.display = 'none';
                    break;
                case e = 'bo3s':
                    e.style.display = 'block';
                    'bo1s'.style.display = 'none';
                    'bo5s'.style.display = 'none';
                    break;
                case e = 'bo5s':
                    e.style.display = 'block';
                    'bo1s'.style.display = 'none';
                    'bo3s'.style.display = 'none';
                    break;
            }
        }
    </script>
</head>
<body background="OverpB_blur.png" >
        <div class="empty_spc"></div>
        <div class="center">
            <h1 align="center">Choose Your Veto Settings</h1>
        </div><br>
        <br>
        <div class="container" style="height: 8%;">
            <div class="same_row_div" style="padding-right: 10%"><button type="button" onclick="toggle_visibility('bo1s')"><a><b>BO1</b></a></button></div>
            <div class="same_row_div"><button type="button" onclick="toggle_visibility('bo3s')"><a><b>BO3</b></a></button></div>
            <div class="same_row_div" style="padding-left: 10%"><button type="button" onclick="toggle_visibility('bo5s')"><a><b>BO5</b></a></button></div>
        </div>

        <div class="settings_block" id="bo1s" style="display: none;">test1</div>
        <div class="settings_block" id="bo3s" style="display: none;">test2</div>
        <div class="settings_block" id="bo5s" style="display: none;">test3</div>


</body>
</html>

As you can see I am trying to show the correct div and hide the two others but for some reason it does not work, maybe it is something wrong with my switch startement?

Upvotes: 0

Answers (5)

Surreal Dreams

Reputation: 26380

First, you're missing a </style> tag.

Your JavaScript is not going to work. It's got several problems:

case e='bo1s': isn't correct syntax. You want it to look like case 'bo1s':.
You're evaluating an element and testing it for strings. Instead make it read switch (id) { Then you're testing the id and comparing it to a string.
Inside each case you're trying to work with elements using just their id. You'll need getElementById for those as well.

Here is your code, working. Styles omitted for brevity.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CS:GO Team Hub</title>
    <style type="text/css">
        /* ignoring your styles */
    </style>

    <script type="text/javascript">

        function toggle_visibility(id) {
            var e = document.getElementById(id);

            switch (id){
                case 'bo1s':
                    e.style.display = 'block';
                    document.getElementById('bo3s').style.display = 'none';
                    document.getElementById('bo5s').style.display = 'none';
                    break;
                case 'bo3s':
                    e.style.display = 'block';
                    document.getElementById('bo1s').style.display = 'none';
                    document.getElementById('bo5s').style.display = 'none';
                    break;
                case 'bo5s':
                    e.style.display = 'block';
                    document.getElementById('bo1s').style.display = 'none';
                    document.getElementById('bo3s').style.display = 'none';
                    break;
            }
        }
    </script>
</head>
<body background="OverpB_blur.png" >
        <div class="empty_spc"></div>
        <div class="center">
            <h1 align="center">Choose Your Veto Settings</h1>
        </div><br>
        <br>
        <div class="container" style="height: 8%;">
            <div class="same_row_div" style="padding-right: 10%"><button type="button" onclick="toggle_visibility('bo1s')"><a><b>BO1</b></a></button></div>
            <div class="same_row_div"><button type="button" onclick="toggle_visibility('bo3s')"><a><b>BO3</b></a></button></div>
            <div class="same_row_div" style="padding-left: 10%"><button type="button" onclick="toggle_visibility('bo5s')"><a><b>BO5</b></a></button></div>
        </div>

        <div class="settings_block" id="bo1s" style="display: none;">test1</div>
        <div class="settings_block" id="bo3s" style="display: none;">test2</div>
        <div class="settings_block" id="bo5s" style="display: none;">test3</div>


</body>
</html>

Upvotes: 2

Grant Hulegaard

Reputation: 646

There were a couple of things wonky with your JavaScript. Here is a link to a working JSFiddle:

https://jsfiddle.net/qyh1uyk3/11/

this.toggle_visibility = function toggle_visibility(id) {
    var e = document.getElementById(id);

    switch (e.id){
        case e.id = 'bo1s':
            e.style.display = 'block';
            $('#bo3s').css('display', 'none');
            $('#bo5s').css('display', 'none');
            break;
        case e.id = 'bo3s':
            e.style.display = 'block';
            $('#bo1s').css('display', 'none');
            $('#bo5s').css('display', 'none');
            break;
        case e.id = 'bo5s':
            e.style.display = 'block';
            $('#bo1s').css('display', 'none');
            $('#bo3s').css('display', 'none');
            break;
    }
};

I found that your function wasn't being triggered by the click events. In this example I should point out that I am using JQuery.

Upvotes: 1

Kevin

Reputation: 160

Close off the tag before the tag, then try this:

<script type="text/javascript">

    function toggle_visibility(id) {
        var e = document.getElementById(id);

        switch (e.id){
            case 'bo1s':
                e.style.display = 'block';
                document.getElementById('bo3s').style.display = 'none';
                document.getElementById('bo5s').style.display = 'none';
                break;
            case 'bo3s':
                e.style.display = 'block';
                document.getElementById('bo1s').style.display = 'none';
                document.getElementById('bo5s').style.display = 'none';
                break;
            case 'bo5s':
                e.style.display = 'block';
                document.getElementById('bo1s').style.display = 'none';
                document.getElementById('bo3s').style.display = 'none';
                break;
        }
    }
</script>

Upvotes: 0

hopkins-matt

Reputation: 2823

This should fix the </style> issue and your switch issue. You should probably take a look at your CSS as well since the buttons appear to be cut off.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CS:GO Team Hub</title>
    <style type="text/css">

        html{
            width:100%;
            height:100%;
        }

        body { /* Used to set the size of the webpage so you don't get 2 pictures */
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        p {
            font-family:"Trebuchet MS", Helvetica, sans-serif;
            font-size: 1em;
        }

        h1 {
            font-family:"Trebuchet MS", Helvetica, sans-serif;
            font-size: 2em;
        }

        .center {
            text-align: center;
            width: 100%;
            border:1px solid #8AC007;

        }

        .empty_spc{
            width: 100%;
            border:1px solid #8AC007;
            padding-top: 3%;
        }

        .container{
            width: 50%;
            height: 10%;
            border: 1px solid #090dc0;
            padding: 1% 25% 1% 25%;
        }

        .same_row_div{
            width: 26%;
            height: 100%;
            float: left;
            display: block;
            margin: 0 auto;
            text-align: center;
            border:1px solid #8AC007;
        }

        button{
            height: 100%;
            width: 100%;
            vertical-align: middle;
            background-color: darkred;
            margin:auto;
            border-color: #bc3315;
        }

        input:focus{
            outline: none;
        }

        a{
            font-family:"Trebuchet MS", Helvetica, sans-serif;
            font-size: 2em;
            color:white;
        }

        .settings_block{
            height: 30% ;
            width: 70%;
            padding: 5% 15%;
            border:1px solid #8AC007;
        }
    </style>
    <script type="text/javascript">

        function toggle_visibility(id) {
            var e = document.getElementById(id);

            switch (e.id){
                case e.id ='bo1s':
                    e.style.display = 'block';
                    document.getElementById('bo3s').style.display = 'none';
                    document.getElementById('bo5s').style.display = 'none';
                    break;
                case e.id = 'bo3s':
                    e.style.display = 'block';
                    document.getElementById('bo1s').style.display = 'none';
                    document.getElementById('bo5s').style.display = 'none';
                    break;
                case e.id = 'bo5s':
                    e.style.display = 'block';
                    document.getElementById('bo1s').style.display = 'none';
                    document.getElementById('bo3s').style.display = 'none';
                    break;
            }
        }
    </script>
</head>
<body background="OverpB_blur.png" >
        <div class="empty_spc"></div>
        <div class="center">
            <h1 align="center">Choose Your Veto Settings</h1>
        </div><br>
        <br>
        <div class="container" style="height: 8%;">
            <div class="same_row_div" style="padding-right: 10%"><button type="button" onclick="toggle_visibility('bo1s')"><a><b>BO1</b></a></button></div>
            <div class="same_row_div"><button type="button" onclick="toggle_visibility('bo3s')"><a><b>BO3</b></a></button></div>
            <div class="same_row_div" style="padding-left: 10%"><button type="button" onclick="toggle_visibility('bo5s')"><a><b>BO5</b></a></button></div>
        </div>

        <div class="settings_block" id="bo1s" style="display: none;">test1</div>
        <div class="settings_block" id="bo3s" style="display: none;">test2</div>
        <div class="settings_block" id="bo5s" style="display: none;">test3</div>


</body>
</html>

Upvotes: 0

Chris Schumann

Reputation: 146

Change your switch statement to switch (e.id) {

At the moment you're comparing the HTML element to a string, you need to access the id property and compare that to the string instead.

Upvotes: 1

HTML divs toggle visibility not workings

Answers (5)

Related Questions