0

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

enter image description here

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 ) );
  



   }
})
Ross Symonds
  • 690
  • 1
  • 8
  • 29
  • Please state your end goal. Should this happen on click of a button or when the page loads? 1) you have 2x toggle - if you toggle something twice it goes back to where it was, so nothing "appears" to have happened 2) you've converted an `if (expression)` to just `(expression)` (without the `if`) 3) *always* debug your variables a simple `console.log(datebox)` would show you that **you have a boolean**, so `true.animate..` makes no sense - **always check the console for errors** (which you'll have this this code) – freedomn-m Sep 12 '21 at 09:17
  • `if ($(".box").css('display') == 'block') $(".box").animate({width: "toggle"});` – freedomn-m Sep 12 '21 at 09:19
  • Rather than use `.css("display") == "block"`, use `$(".box").is(":visible")` as "block" won't include eg `inline` or `inline-block` (or any other "visible" display property) – freedomn-m Sep 12 '21 at 09:20
  • When the calender widget appears I want to apply an animation. I am using infinite scrolling datapicker (https://github.com/systemantics/infinite-scrolling-datepicker/blob/master/demo.html) so unfortunately the instructions from jqueryui (https://jqueryui.com/datepicker/#animation) don't help. – Ross Symonds Sep 12 '21 at 09:31
  • I have multiple date input fields on a page. I am checking for css('display')=='block' because I only want to apply the animation to the visible calendar. – Ross Symonds Sep 12 '21 at 09:34
  • "*I am trying to find a way of selecting elements which have a specific class*" - then use a class selector: `$(".myclass")` – freedomn-m Sep 12 '21 at 10:20
  • "specific class and CSS style" – Ross Symonds Sep 12 '21 at 10:44
  • Can you get the class selector to also look for elements which have specific CSS properties? – Ross Symonds Sep 12 '21 at 10:45

1 Answers1

1

The sentence '$('.box').css('display') == 'block' returns boolean statement. If you know, .animate method should be used with the html element (selector). Try to use something like this:

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

combine it with '.each()' and the final result will be:

$('.box').each(function(){ $(this).css('display') == 'block' && $(this).animate({width: 'toggle'}) })
Cucunber
  • 161
  • 3