Hide button after clicking

Question

Hide button after clicking

I am trying to hide a button (not inside form tags) after it is clicked. Once the form is shown, the button is not used. So I would like to hide it after clicking

Here is the existing code.

<script type="text/javascript">
	$(function(){
		var button = document.getElementById("info");
		 var myDiv = document.getElementById("myDiv");

		 function show() {
		     myDiv.style.visibility = "visible";
		 }

		 function hide() {
		     myDiv.style.visibility = "hidden";
		 }

		 function toggle() {
		     if (myDiv.style.visibility === "hidden") {
		         show();
		     } else {
		         hide();
		     }
		 }

		 hide();

		 button.addEventListener("click", toggle, false);
	});
</script>

<input id="info" type="button" value=" ?" class="switchbuton">

Run code Hide result

+3

javascript html

Mo-Alanteh Apr 30 15 at 8:46

source to share

3 answers

Robin · Answer 1 · 2015-04-30T09:01:17+0000

You can use jQuery hide

$("#myDiv").hide() // to hide the div

and show , for example

$("#myDiv").show() // to show the div

Or toggle to toggle the visibility of dom elements

$("#myDiv").toggle() // to toggle the visibility

uzay95 · Answer 2 · 2015-04-30T09:08:20+0000

You can check the result here:

http://jsfiddle.net/jsfiddleCem/33axo20f/2/

Code:

<style>
.showButon{
    background:url('http://spacetelescope.github.io/understanding-json-schema/_static/pass.png');
    background-repeat:repeat-y;
    height:30px;
    text-indent:20px;
}
</style>

<div id="myDiv">
    <input id="info" type="button" value=" ?" class="showButon" />
</div>

(function(){
var button = document.getElementById("info");
    var myDiv = document.getElementById("myDiv");

    function toggle() {
        if (myDiv.style.visibility === "hidden") {
            myDiv.style.visibility = "visible";
        } else {
            myDiv.style.visibility = "hidden";
        }
    }

    button.addEventListener("click", toggle, false);
})()

Kartic · Answer 3 · 2015-04-30T09:00:43+0000

Why don't you use:

<script type="text/javascript">
    $(function(){
        $('#info').click(function() {
            $(this).hide();
        });
    });
</script>

<input id="info" type="button" value=" ?" class="switchbuton">

Hide button after clicking

More articles: