javascript - How to set an element that I am toggling to be collapsed on load -

i struggling figure out how make element toggling on click jquery collapsed when page loads. open on load @ moment - opposite of need.

keeping in mind i'm beginner, can please me? thanks.

// toggle        $('.togglehandle').click(function() {     $(this).toggleclass('active');     $(this).next('.toggledata').slidetoggle(); });  // alert close  $('.clostalert').click(function(){     $(this).parent('.alert').fadeout ();     $('#options').hide(); });  

first off, remember set ".toggledata" element display: none in css.

also, make sure 2 handlers posted wrapped in $(document).ready(). in other words, make sure have below:

$(document).ready(function() {     // toggle            $('.togglehandle').click(function() {         $(this).toggleclass('active');         $(this).next('.toggledata').slidetoggle();     });      // alert close      $('.clostalert').click(function(){         $(this).parent('.alert').fadeout ();         $('#options').hide();     });  }); 

and because mentioned beginner..........here little code cleanup ;)

$(document).ready(function() {     // toggle            $('.togglehandle').on('click', function() { //1: .click() -> .on('click',         var $this = $(this); //2: $(this) -> var $this = $(this)         $this.toggleclass('active');         $this.next('.toggledata').slidetoggle();     });      // alert close      $('.clostalert').on('click', function(){         $(this).parent('.alert').fadeout(); //3: no change         $('#options').hide();     });  }); 

explanation of changes:

1. changing .click() .on('click'...

   the .click() method shorthand .on('click'... method. using long form doesn't have benefits on shorthand, except standardizes handler bindings , has more options parameters (like when using delegated events, in future).

2. changing $(this) var $this = $(this)

   this part difficult wrap mind around. first , foremost, understand jquery, itself, function object. developers of jquery gave library 2 names can both used interchangeably when coding: $ , jquery.

   in other words, both of following equivalent:

   $('.toggledata').slidetoggle(); 

   and

   jquery('.toggledata').slidetoggle(); 

   this important because must remembered $ function name, used other. such, each time call $(this) calling "constructor" function initialize new jquery object. such, make code more efficient, store $(this) in variable can reused.

   the variable name $this convention (a 1 should make habit of using). common convention prefix name of variables hold jquery objects dollar sign. example, if store $('.clostalert') in variable like:

   var $clostalert = $('.clostalert'); 

3. notice not bother store $(this) in variable in second handler because used once , $(this) called once there.