[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: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.