7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 7Length: 36 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Hiding and Showing Elements

Time to move things up a level. In this lesson you will learn how to achieve the plain JavaScript equivalents of the jQuery hide() and show() methods.

Useful Links

2.3 Hiding and Showing Elements

Hello, and welcome back! So far, we've talked about a couple of different ways that we can point to elements in our HTML using plain JavaScript. Specifically, we've talked about the get element by id method, the get elements by class name method, and the query selector all method. And now that we know how to point to these items, let's talk about a couple of different ways that we can manipulate them. In our activateQuestion function, for example, we've got some jQuery code that's hiding and showing these elements using jQuery methods hide and show. And what that's doing is it's hiding certain answers and showing whichever answer we've just clicked on. So let's talk about how we can achieve that same effect using plain JavaScript. So you can find the URL for our starting code pen here in the course notes for this lesson. Once we've opened that up, go ahead and click on Fork to open a new copy of it. And then I'm gonna get rid of this temp variable here, because we don't really need that, that was just an example. So we've got rid of that, and now I want to jump into our activateQuestion function and replace the jQuery code there with some plain JavaScript. So first of all, we're gonna change the object that we're pointing to. Instead of pointing to $answer, which we got using a jQuery selector, I wanna use the answer variable here without the dollar sign in front of it that we used to get elements by class name with. So let's comment out this first line. We'll completely get rid of it in a second, but for now, I just want to remember that it was there. And we'll go to the next line. And the way we hide an element using plain JavaScript is by changing its style. We're gonna change the display property of that object, and we're gonna set it to a value of none. Now, if we had done getElementById, then this would be a little bit easier. Because when we do getElementById, it's only grabbing a single element, there's only one element that it can get. So we can point to that element, point to the style property and the display property and set it to the value we want. However, we didn't do getElementById for the answer variable. Instead, we did getElementsByClassName because there are multiple elements with a class of panel body, because we needed that class on three different elements. So there are actually three different elements stored in this answer variable. So we can't just point to that answer variable and set the style property. Now, we could do that in jQuery, because jQuery makes things a little bit easier for us. But in order to do it with plain JavaScript, we're actually gonna need to loop through the three elements that are stored in this answer variable and set the style individually for each one. And it's as simple as creating a for loop. So we're gonna do a for loop here and here we're gonna create a variable called i, set it equal to 0, and we're gonna run this loop as long as i is less than answer.length. Remember, this answer variable is storing an HTML collection object, which functions a lot like an array. So we're gonna look through this object just like we would through an array, and then we'll increase the value of i by 1 during each iteration, so i++. And then our opening and closing curly brackets for that for loop. So each time we run through this for loop, we're going to point to a different element inside this answer array or this answer collection. So we're going to point to answer and then inside square brackets, we're going to point to i, which again is this variable right here. So the first time we loop through it, i will be equal to zero, so it will point to the first item in that collection. So we're going to point to answer i, dot, and then we're going to point to a property called style. And then that style property has a property called display. So answer[i].style.display, and I'm gonna set that equal to a value of none, and then put a semicolon at the end of that statement, and we'll see that our code is now working again. We can click on any particular title to expand the section underneath it. And the second half of this function is still using jQuery, but the first half is now using plain JavaScript. So now that we've got that working, we can get rid of this commented out piece of code right here the $answer.hide, we'll just get rid of that. And now we're gonna replace this second one here. What you'll notice here, we're using kind of a complex CSS selector to find what we're looking for here in jQuery. And since we're using this complex selector instead of just a simple class name or ID, then it would make sense to use the query selector all method to get that. So what I'm gonna do is I'm just gonna manipulate this line here. And I'm gonna create a new variable, first of all. And we're gonna set this, no, we gotta give it a name first. We're gonna call this activePanel. And we're gonna set this equal to, let's get rid of the .show at the end. And we'll get rid of the dollar sign at the beginning. We'll set this equal to document.querySelectorAll. And we're looking for panel-question.active, so we're looking for the active panel and the panel body inside that active panel. Because the panel body inside the panel is what needs to show up, what needs to expand out. So this should get us, again, we're using querySelectorAll, so this is gonna be stored in HTML collection as well. So this is also going to act like an array. So what I'm gonna do is I'm going to grab our for loop up here. And just below our activePanel variable that we just created, I'm gonna paste that for loop. And here, instead of answer.length, we're gonna point to activePanel.length. And then instead of answer[i].style.display, we're gonna point to activePanel[i].style.display. And instead of setting it to none here, we need to take away the none. Because up here, it's setting all of them, all of our panel answers, it's setting them all equal to none so that they're all invisible. And for this one here, we want to get rid of that none. So we want to set it to an empty string. So let's see if that worked. We're gonna click on our panels, and sure enough, our code is still working. We've now replaced all of our jQuery inside this activateQuestion method with plain JavaScript, and everything is still working just fine. So thank you for watching, and I'll see you in the next lesson.

Back to the top