Switch effect in jquery by default

Question

My requirement: when I press the "li" button, his brothers "p" should move down, and by successive click - up. I achieved this through the following code. But by default, "p" closes. Only when I push the slide up / down does it work. I want p elements to be copied (hidden) by default. How to achieve this?

HTML:

<ul id = "duration"> <li id="time">Time</li> <p><input type="text" id="from" /></p> <p><input type="text" id="to" /></p> </ul> 

Jquery:

  $(function(){ $('ul #time').toggle(function(){ $("#duration p").show("slow"); }, function(){ $("#duration p").hide("slow"); }); }); 

Answer 1

Just hide them at the top of the page:

 $(document).ready(function() { $("#duration p").hide(); }); 

Answer 2

$("#duration p").css("display",'none');

try adding this as the first line in $(function(){)

This will make all p hidden by default

Answer 3

use this

 $("#duration p").toggle(); $(document).on("click", '#time', function(){ $("#duration p").toggle("slow"); });