How to make a block arrow left down when collapsing block?

Is there a container that I want to open / close when you click on the arrow, and when the folding unit of page goes down and the arrow itself takes place on the opposite but can't figure out why the toggle doesn't work. link to fiddle
<div id="bottom-arrow"></div>
<div id="fix-bot">
<p>the Container</p>
</div>

$('#bottom-arrow').click(function() {
$('#fix-bot').toggle('slow');
 });

#fix-bot {
 position: fixed;
 width: 100%;
 bottom: 0;
 background: rgba(153, 0, 0, 0.8);
}
#fix-bot p {
 color: #fff;
 text-align: center;
}
#bottom-arrow {
 position: fixed;
 width: 100%;
 bottom: 50px;
 pointer-events: none;
 height: 23px;
 background: rgba(153, 0, 0, 0.8);
}
#bottom-arrow:before {
 pointer-events: all;
 content: "\f106";
 font-family: 'FontAwesome';
 display: block;
 color: #fff;
 font-size: 50px;
 font-weight: 400;
 position: absolute;
 top: 0;
 left: 50%;
}
July 9th 19 at 13:03
2 answers
July 9th 19 at 13:05
Solution
Something like, the arrow is smart enough to do, the direction I gave you. Example
Oh, super, Yes - well done! - Shaun.Doyle commented on July 9th 19 at 13:08
July 9th 19 at 13:07
you have something quite obscure happened - take a look at the example above - Shaun.Doyle commented on July 9th 19 at 13:10

Find more questions by tags HTMLJavaScriptjQuery