Tracklist Show & Hide JavaScript

[00:00:00]
>> All right, so now comes the part that we've all been waiting for. And that is to write a little bit of JavaScript in order to make this button actually do something. So to do that, we have here in your JavaScript, I've actually put it in for you already, all you'll need to do is uncomment it.

[00:00:17]
This is the first bunch of JavaScript up here at the top, which my friend Erica Lee wrote, gave to me many years ago and I continue to use it to this day. So what we have here is we are looking for a querySelector. And we are looking for a querySelector of .button-tracklist, and we are adding to that, an EventListener.

[00:00:44]
So on click, we're going to do something. We're going to switch a class of hidden to a class of showing. And so now we need to configure these classes that are here inside of this JavaScript to match our HTML. So the first part of this, the document querySelector, where it says the .button-tracklist, we need to have a class assigned to our button that matches this particular querySelector, so let's do that.

[00:01:12]
We've got our button with the ID of tracklist. Let's also give it a class of button-tracklist. So when the button is clicked, what are we going to do? We're gonna swap these classes of hidden and showing. So where should we apply that? Think about that for a moment.

[00:01:36]
Should probably be the table. So we'll start with our table with a class of hidden. Now absolutely nothing has happened yet because we don't have that class of hidden defined, so let's put that in as well. So continuing on here in on our layer of tracklist, right after our table styles, then we can add a class of hidden, which will be display: none.

[00:02:14]
And we can add a class of showing, and that will be display: table. You may not know that there is a display type of table, but in fact there is, and since this is a table, we might as well use it. So not display: block or anything else, just display: table, and so now we have a button down here.

[00:02:36]
When we roll our mouse over it, everything highlights, even over here in the edges of this button. When we click it, that button opens and there's our tracklist, opens right on down the page. Very, very nice. Okay, so the only thing we have going now is a usability problem.

[00:02:58]
So our button, which is great, it says tracklist, that's exactly what we want it to say before it's opened. But there's not necessarily a way to close this tracklist up again, it's not obvious how to do that. So one of the things that we could do here, because when we click the button again, it does in fact close, we could change the text on this button from tracklist to close.

[00:03:24]
And we can do that with another piece of JavaScript, right? So here, inside of our JavaScript box here in CodePen, I found a little bit of JavaScript to do this. I copied it from a blog post, and there's the credit where you can go and read about that.

[00:03:41]
I'm relatively sure that you could combine these two pieces of JavaScript, but I am not a JavaScript person. So I leave it to you guys to figure out how to combine all this JavaScript into a single kind of function and make all of this happen. But it works just fine as two separate little functions, and they're both very short.

[00:03:59]
So what we're going to do here is uncomment this little bit of JavaScript. And as you see here, this one is doing a getElementById('tracklist'). So that's our button with the ID of tracklist. And what it will do then is it has a constant here, the initial text is going to be tracklist, great.

[00:04:25]
That is exactly what we want it to say. And then once we have clicked on it, if that initial text is there, swap it for the text, and it says, close. And you see we have that interesting looking little bit of unicode there. This is an actual x, so it's an x kind of thing.

[00:04:45]
Otherwise, we are gonna show the initial text. So once that's in place and you have uncommented it, then when you click the tracklist button, now our text changes. There's our close. And when you click it again, it goes back to the word tracklist. So that is how we're going to set up our initial tracklist here for our mobile display.

[00:05:09]
Looks great, but when we get to our tablet display, we want this tracklist to show up on the left side of our album cover. Let's take a look at that next.