Make certain divs pop in when you click something, and do a Click To expand div


So I'm wanting to create something somewhat like this: I have an idea of how to get the music playing and all that, which is done through PHP.. But I'd like to know how the heck they do the Click to Expand (click a box under the current playing song), and then you can click previous hours and have those "pop in". In the code they have something called slot it, so guessing they made something special in bootstrap.

Also, What's interesting, is when a new song plays, it automatically loads on to the page. I don't see any Dom's for an inline refresh or anything. Can you give me some tips?

Collapse part is figured out :)

<a href="#collapse-1">Click To Expand</a>

Click on an hour at the bottom to see that hour pop in, and if you click a new hour it fills in, and in the correct order.. Not sure how this is being accomplished.

UPDATE Using the Collapse I have multiple divs, so I am trying to assign it like collapse-timeplayed.. but when I am doing so the collapse and uncollapse is not working at all. Not sure what's going on here.

Fixed collapse with

`<?php SQL INFO $i = 0;
    while($row = mysqli_fetch_assoc($result))
    { $i++;?>`

That works for the collapsing :)

You do realize that's basically an Accordion component with a bit of extra coding to help with the turning on and off of the music right? You probably don't have to create the whole thing, just edit an Accordion setup to add your extras for.

Found out that it is an accordion.. but how does the music order with the timing once that hour is clicked. I know how to load the songs from the database.. That's peiece of cake, but the time part is what I'm trying to figure out..

As far as the lyrics:

I'm using JQuery for typer, but when you click the Click to expand it slides down as expected, but the lyrics for that song are not typing as they should.

Here is my JQuery

<script src=""></script>
Replace me with typewriter text in source!
<div id="lyric" class="lyric" style="color: rgb(0,123,255);width: 501px;font-style: italic;">
<?php echo $mytext;?>
  $(function () {
    if ($('.collapse').hasClass('.show')) {
    html: $('<p><?php echo $mytext;?></p>'),
    completed: $.noop

If you view my page source for the page, the text indeed does show in the typer code. Not sure why it won't show when the element is slid down in view.

On the page currently, it does have the lyrics in plain text, which gives you the idea of the result this would have, with the typer. The JQuery for what ever reason doesn't want to show correctly.

Here's the JS Fiddle... The timing part I still need to somehow figure out.. but I can't figure out why the javascript is not working.