Search code examples
javascriptjqueryhtmlslidetoggleslidedown

Not sure how to reference object for `slideDown,js` operation?


I have a JS function that expands a list item once clicked as follows:

      <script>
          $(document).ready(function(){

            $('#improved .head').click(function(e){
              e.preventDefault();
              alert($(this).closest('li').find('.content').not(':animated'));
              $(this).closest('li').find('.content').not(':animated').slideToggle();
            });
          }); 
      </script>

I want a button that expands (slides down) each element whether its slide attribute is toggled on or off, but i do not know how to get a reference to these elements.

I tried creating a button that calls this function,

    <script type="text/javascript">
          function ExpandForPrinting() {
          for (header in $(this).closest('li').find('.content').not(':animated')){

          header.slideDown();

          }           
          }
      </script>

But it did not work. Whats the correct way to get the references to these objects?


Solution

  • Try using JQuery's .each() instead:

    function ExpandForPrinting() {
       $(document).find('.content').not(':animated').each(function(){
          $(this).slideDown();
       });
    }
    

    I think this would also work:

    function ExpandForPrinting() {
       $(document).find('.content').not(':animated').slideDown();
    }