Как сделать так, чтобы блок со стрелкой уходил вниз при сворачивании блока?

Question

[ligisayan]

Есть контейнер, который хочу открывать, закрывать при клике по стрелке, причем при сворачивании блок с галкой опускается вниз и сама стрелка разворачивается на противоположную, но не могу понять почему toggle не срабатывает. ссылка на фидл

<div id="bottom-arrow"></div>
<div id="fix-bot">
  <p>Контейнер</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%;
}

Answer 1

[DenJel]

Как то так, про стрелочку додумайте сами, направление я вам дал. Пример

Comments

[ligisayan]

DenJel оу, супер, да - молодцом!

Answer 2

[Василь Бойко]

jsfiddle.net/ywpuwzgf

Comments

[ligisayan]

Василь Бойко у вас что-то совсем невразумительное получилось - гляньте на пример выше