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

Question

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> 

Answer 1

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>