Question

I want to show() '<div id='test'>write text here</div' on click and not on page load.

$(document).ready(function() {    $('#click_test').stop(function(event) {     event.preventDefault();     $('#test').slideup();   });    $('#click_test').click(function(event) {     event.preventDefault();     $('#test').toggle();   });  });

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>  <a href='#' id='click_test'>Click Here</a> <div id='test'>write text here</div>

Answer 1

add $('#test').hide(); in your javascript:

  <script type='text/javascript'>     $(document).ready(function(){         $('#test').hide();          $('#click_test').stop(function(event){             event.preventDefault();             $('#test').slideup();         });          $('#click_test').click(function(event){             event.preventDefault();             $('#test').toggle();         });      });   </script> 

Alternatively in your html:

<div id='test' style='display:none'>write text here</div> 

gives the same result