Show/ Hide by Div Id

Question

I have several fields in a form and if a user clicks on one field I want to display a table otherwise if they click another field the table should be hidden.

I tried this javascript but when other fields are clicked it doesn't hide the table:

<script>
function myFunction() {
    if (document.getElementById("userform")) {
        document.getElementById("userinfo").style.display="block";
    } else {
        document.getElementById("userinfo").style.display="none";
    }
}

</script>   

On each field I have included a onclick="myFunction()" within each input type. The table is set to style="display:none"

This is the HTML:

    <form class="form-horizontal" role="form">
        <div class="form-group">
            <label for="hest" class="col-sm-1 control-label"><b>Pi</b></label>
            <div class="col-sm-10">
                <input type="tel" class="form-control" id="userform"
                    placeholder="Enter your unique Pi identity" onclick="myFunction()">
            </div>
        </div>
        <div class="form-group">
            <label for="inputPassword1" class="col-sm-1 control-label">
                 <b>Password</b>
            </label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="inputPassword1"
                    placeholder="Password" onclick="()">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-sample btn-lg">
                    <b>Submit</b>
                </button>
            </div>
        </div>
    </form>





    <div id="userinfo" class="collapse in" style="display:none">
        <table class="table table-bordered" id="phone-table">
            <tbody>
                <tr>
                    <td class="col-md-1"><button type="button"
                            class="btn btn-primary btn-xs1">
                            &nbsp;<br> <b>1</b>
                        </button>
                    </td>
                    <td class="col-md-1">
                        <button type="button"
                            class="btn btn-primary btn-xs1">
                            <b>ABC<br>2
                            </b>
                        </button>
                    </td>
                    <td class="col-md-1"><button type="button"
                            class="btn btn-primary btn-xs1">
                            <b>DEF<br>3
                            </b>
                        </button>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-1"><button type="button"
                            class="btn btn-primary btn-xs1">
                            <b>GHI<br>4
                            </b>
                        </button></td>
                    <td class="col-md-1"><button type="button"
                            class="btn btn-primary btn-xs1">
                            <b>JKL<br>5
                            </b>
                        </button></td>
                    <td class="col-md-1"><button type="button"
                            class="btn btn-primary btn-xs1">
                            <b>MNO<br>6
                            </b>
                        </button></td>
                </tr>
                <tr>
                    <td class="col-md-1"><button type="button"
                            class="btn btn-primary btn-xs1">
                            <b>PQRS<br>7
                            </b>
                        </button></td>
                    <td class="col-md-1"><button type="button"
                            class="btn btn-primary btn-xs1">
                            <b>TUV<br>8
                            </b>
                        </button></td>
                    <td class="col-md-1"><button type="button"
                            class="btn btn-primary btn-xs1">
                            <b>WXYZ<br>9
                            </b>
                        </button></td>
                </tr>
                <tr>
                    <td class="col-md-1"><button type="button"
                            class="btn btn-primary btn-xs1">
                            <b><i class="fa fa-arrow-circle-left"></i><br>Del</b>
                        </button></td>
                    <td class="col-md-1"><button type="button"
                            class="btn btn-primary btn-xs1">
                            <b>&nbsp;<br>0
                            </b>
                        </button></td>
                    <td class="col-md-1"><button type="button"
                            class="btn btn-primary btn-xs1">
                            <b><i class="fa fa-eraser"></i><br>Clr</b>
                        </button></td>
                </tr>
            </tbody>
        </table>
    </div>

Answer 1

since Jquery was among tags, i throw my cents in jquery

.hide(); / .show(); implicitly sets dislay to block or none in css.

$(function(){
 $('#close').on('click',function(){
   $('#danceforme').hide();
 });
 $('#open').on('click',function(){
   $('#danceforme').show();
 });
});

html

<button id="close">Stop Dancing</button>
<button id="open">Dance for me</button>

<div id="danceforme">
   I am dancing
</div>

demo: http://jsfiddle.net/doniyor/5FT9x/

Answer 2

You have tagged jQuery also so in that case it will be

$("#id").show();

$("#id").hide();

Answer 3

Doniyor's Answer is great for jQuery. I want to help explain how to make your existing code work, since that will help you understand why it wasn't working, instead of just handing you a solution.

Simple Solution

The problem with myFunction() is the if statement -

if (document.getElementById("userform"))

That checks to see if an element with ID "userform" exists in the DOM. If it does, the statement returns true. Since there's an input with ID "userform" in the HTML you provided, this will always be true.

Instead, you want to check if the element that triggered your function had the ID "userform",

so the relevant HTML would look like this:

<div class="form-group">
    <label for="hest" class="col-sm-1 control-label"><b>Pi</b></label>
        <div class="col-sm-10">
            <input type="tel" class="form-control" id="userform"
             placeholder="Enter your unique Pi identity"  onclick="myFunction(this)" />
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword1" class="col-sm-1 control-label">
             <b>Password</b>
        </label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword1"
            placeholder="Password" onclick="myFunction(this)"/>
        </div>
    </div>

And myFunction() would look like this:

function myFunction(obj) {
    if (obj.id == "userform") {
        document.getElementById("userinfo").style.display="block";
    } else {
        document.getElementById("userinfo").style.display="none";
    }
}

jsFiddle

An explanation of registering onclick events . Because you're registering the onclick via html, and not in a script, the triggering element does not become the owner of the function, which is what this would refer to. So we have to pass the object via a parameter, and check that object's ID.

Of course, this is all very roundabout, and since you're already using jQuery and bootstrap, you probably don't want to manually show and hide things.

Bootstrap + jQuery fancy solution

The div you're trying to show/hide is a collapse , which bootstrap has functionality for already.

Bootstrap solution jsFiddle

Explanation: First, I removed the style="display:none" and class in on the collapse element. Class in on a collapse tells bootstrap to default the element to showing, while display:none overrides bootstrap's styling. It is enough to use class="collapse" , which defaults to collapsed, or hidden.

Next, I removed the onclick assignments, since we'll let bootstrap handle that.

Finally, I replaced the existing script behavior with a script telling bootstrap the behavior we want:

$("#userform").focusin(function(){alert("in"); $("#userinfo").collapse("show");});
$("#inputPassword1").focusin(function(){alert("out"); $("#userinfo").collapse("hide");});

I left the alerts in for debugging, always helpful when you're not sure what's going on!

So what is this doing? Following Bootstrap's example usage , we want the collapse to show when we click the "userform" element.

First, we tell jquery we want to do something when the element with id userform gets focus. That's $("#userform").focusin() via jQuery API docs .

Then we tell jquery what we want to do when that happens - we could specify a named function, like myFunction() , but in this case, it's just one line, so we create an inline function. That's function(){} .

Inside that function we specify the Bootstrap behavior we need. From the Bootstrap docs , we know we can use the function collapse("show") to manually expand the collapse element. To tell Bootstrap which one, we just give jQuery the element id! Together, that's $("#userinfo").collapse("show");

Putting that inside the function that's triggered, which is specified in our focusin() function, we get the final result: `$("#userform").focusin(function(){ $("#userinfo").collapse("show");});

Next, we do the same for the elements we want to trigger hiding the collapse element. So we just modify that line for #inputPassword1 , and tell it to hide the collapse using collapse("hide") instead of "show" . Logical, right?

I find it very helpful when I'm programming behaviors like this to consult the documentation. There are usually examples of exactly what I want to do, which only require minor tweaking to get working on my sites.

jQuery's documentation is here.

Bootstrap's documentation is here.

And when asking for help on SO, it's great if you can create a jsFiddle to isolate the problem from the complexities of the website you're producing. Then other users who want to help can create modified copies of your code to show. It's super helpful!

Cheers.