How To Approach Hiding An Element If Class Is Found

I'm trying to figure out jquery still and in my attempts I'm trying to figure out not only how to use various thing but why, I haven't tested any of this so not even sure it works

Solution 1:

How about toggleClass:

$('.more').toggleClass('hidden', !!$('.active').length))

Then add the animations via CSS transitions:

.more { -webkit-transition:opacity 500ms; opacity:1 }
.hidden { opacity:0 }

There are many ways to "do things", but in the end it’s a matter of writing performant, "understandable" code and keeping in line with browser support etc. The jQuery API does have some great methods that are also self-explanatory in it‘s naming conventions.

Working with classes and CSS transitions allows you to separate logic from presentation nicely, and it’s easy for other co-workers to hook into the CSS without being bothered by inline styling.

Solution 2:

IMO the best solution is to use classes since they are supported by every browser.

The .animate() method allows us to create animation effects, use it if you want a smooth transition.

With $(...).hide() the matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css( "display", "none" ), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. If an element has a display value of inline and is hidden then shown, it will once again be displayed inline.

The hidden attribute is supported in all major browsers, except some vs of Internet Explorer. The hidden attribute must not be used to hide content that could legitimately be shown in another presentation. For example, it is incorrect to use hidden to hide panels in a tabbed dialog, because the tabbed interface is merely a kind of overflow presentation — one could equally well just show all the form controls in one big page with a scrollbar. It is similarly incorrect to use this attribute to hide content just from one presentation — if something is marked hidden, it is hidden from all presentations, including, for instance, screen readers.

Attributes vs. Properties

The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

For example, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected should be retrieved and set with the .prop() method. Prior to jQuery 1.6, these properties were retrievable with the .attr() method, but this was not within the scope of attr. These do not have corresponding attributes and are only properties.