javascript - dropdown list with preset closed height breaking dynamic height variable -

why ello!

im trying list of boxes, variable height, able hide / show content .animate() on 1 function. im trying height of content boxes .height() works... need set boxes height start @ 0px page loads , boxes closed begin with.

the problem arises me being bad variables. can thing work, set boxes start @ 0px(globally)... variable set on click find content size finds size of 0px set initial state... boxes can close have no height reopen to.

if comment out first line in jsfiddle , below , can see sort of working:

//$(".classname").find("p").not(".trigger").css({height: '0px'}); 

btw: know way made selectors $(this).parent().bla().bla().bla(); not efficient way of selecting these items sites actual code more complex , wanted keep similar. thx!

here 1 way it:

/** set object. **/ var allelementheightsoriginally = {                                       heights: {}                                   }; var triggerelementheight = $(".trigger").height(); /** add original heights object, along element indices. **/ $(".classname").each(function (index, element) {     allelementheightsoriginally.heights[index] = {         index: index,         original: ($(element).height()-triggerelementheight)     }; }); /** click event. **/ $(".trigger").click(function () {        var indexclicked = $(".trigger").index(this);     var theelement = $(this).parent().find("p").not(".trigger");     $.each(allelementheightsoriginally.heights, function (thekey, valuearray){            if(indexclicked == thekey){             var height = valuearray.original;             $selected = $(theelement);             if ($(theelement).hasclass('toggle')) {                 $selected.stop().animate({height:"0px"});                 $(theelement).removeclass('toggle');             } else {                 $selected.stop().animate({height: height + 'px' });                 $(theelement).addclass('toggle');             }         }     }); }); /** collapse default. **/ $("p").not(".trigger").css({height: '0px'}); 

i'm not sure whether code above follows best practices, work!