JQuery Beer FAQ Tutorial
Filtering Visible Elements
Section 3, Lesson 5
JQuery Beer FAQ Tutorial
Filtering Visible Elements
Section 3, Lesson 5
This lesson is to look at how you might filter elements based on their visible state. You use this to target code to visible elements. This could be helpful as your code for visible, or even not visible elements, grows and the number of elements grows. For example more FAQs in this example.
Insert the highlighted lines 20 – 22 in the index.html file in your practice folder, then save.
Source Code
In this example the slideUp of all elements with the faq-answer class occurs when the first FAQ click occurs. However in the css file the faq-answer class is already hidden. Making a call to the slideUp method is not necesaary. We do not know the efficiency of the slideUp method, but we could expect it would do nothing if the element is not visible. However you cannot count on that and for that reason it is better to skip calling it unless necessary.
To help with that, JQuery provides an is method that can check for various states of selected elements. One preset value that you can use is :visible.
Here you use these in an if code block on lines 20 through 22. The if condition on line 20 uses the is method to test for the true state of the :visible value. In that case you apply the slideUp method on line 21 to only faq-answer classed elements that are visible. This eliminates unnecessary uncertainly about what overhead is in the slideUp method.
When you try this, nothing will functionally change. All you are doing is assuring your code is more stable and learning more about JQuery.
Source Code
This is the completed site.css file for this tutorial. There are no changes from the previous lesson.