CODEWITHSUNDEEP
javascriptjqueryhtml
Monroe
Monroe

Reputation: 177

hide a paragraph that is already showing page load when button is clicked

I cannot get my head around how to do this, but I was wondering how I would hide text that is showing on page load when a button is clicked.

This is what I currently have:

$(document).ready(function() {
   var $p = $('p#menu_title');
   $("input#save_first_prod").click(function() {
      $p.css('visibility', 'hidden');
   });
});
<div id="red_head">
   <p id="menu_title" onclick="hideText('text1')" > Add your first menu item</p>
</div>
<form name="first_prod" id="first_prod" enctype="multipart/form-data" action="testing.php" method="post" accept-charset="utf-8" >               
   <input type="Submit" id="save_first_prod" name="save_first_prod" value=" + ADD"> 
</form>

Upvotes: 3

Views: 84

Answers (1)

Uttam Kumar Roy
Uttam Kumar Roy

Reputation: 2058

Use display:none; instead of visibility

Change $p.css('visibility', 'hidden'); to $p.css('display', 'none');

This works fine for me

$(document).ready(function() {
var $p = $('p#menu_title');
$("input#save_first_prod").click(function() {
    $p.css('display', 'none');

});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="red_head">
                <p id="menu_title" onclick="hideText('text1')" > Add your first menu item</p>
            </div>

 <form name="first_prod" id="first_prod" enctype="multipart/form-data" action="testing.php" method="post" accept-charset="utf-8" >               
<input type="Submit" id="save_first_prod" name="save_first_prod" value=" + ADD"> 

            </form>

Upvotes: 1

Related Questions