Okay, now it’s time to talk about the sliding animation. You learned the basics of .slideUp() and .slideDown() in Episode 7 of the Introduction to jQuery lab. Let’s explore the options and see what these constructs do to the inline CSS for the elements.
Let’s talk about how we check if the hidden content is showing or not. You’ll use the is.(‘:visible’) jQuery construct. You’ll see the difference between using visibility, opacity, and display to set the content is hidden. There is a difference.
Let’s build the code that runs when the visible content is clicked. You’ll start by thinking about everything that needs to happen. Let’s lay out the sequence. Then we’ll start building each part of it. In this episode, you are rewriting a little bit of code. It’s a good exercise in the plugin development thought process. As you develop, you want to think about how to improve your code.
Let’s figure out what we need our jQuery script to do and how we want to accomplish each task. We’ll talk about how to write more performant code, caching DOM lookups, and using the index of the clicked element to go grab the rest of the elements without having to search the DOM again. If you need a refresher on jQuery, go back and watch the applicable parts of this lab: