Clever Geek Handbook

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 codeHide result


+3


source to share


3 answers


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
+2


source


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);
})()
+1


source


Why don't you use:

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

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


source






More articles:


All Articles