I read Jquery: How to check if the element has certain css class/style and have got this working -

if ($(".box").css('display') == 'block')
{
  
    console.log("message  2 - Div with box class exists and css Block exists")


}

I read how to create jquery slide left and right toggle and got this working -

 $(".box").animate({width: "toggle"});

I can't seem to combine the two above together though. These two attempts failed -

   // ($(".box").css('display') == 'block').animate({width: "toggle"});
   // ($(".box").css('display') == 'block').animate({width: "toggle"});


   var datebox = ($(".box").css('display') == 'block')
   datebox.animate({width: "toggle"})
   datebox.animate({width: "toggle"})

Update 1

I tried Cucunber's suggestion and got this error - Uncaught TypeError: ".box".each is not a function

Update 2

I solved the problem highlighted in Update 1 by adding $ to ('.box'), Cucunber updated his answer below based on the issue I faced.

Update 3

I tinkered with Cucunber's solution and eventually solved my problem with this code.

$(".box" ).each(function( index ) {


   if ($(this).css('display') == 'block' ) { 



console.log( index + ": " + $( this ) );
  



   }
})