анимация ондного объекта по отношению к другому
 

здравствуйте уважаемые пользователи.
пытаюсь реализовать анимацию путём css т.к. на js знаю и захотелось усложнить себе жизнь.
задача следующая, нужно сделать эффект на подобии toggle
есть div кнопка, с названием "показать кто онлайн".
и есть div-блок, у которого значение по стандарту хайд.
по нажатию кнопки, этот контент должен плавно выдвигаться. а по нажатию ещё раз, так же плавно выдвигаться.
как я понял плавность делать через transition, но ни какой плавности нет.
и вторая проблема, как сделать что бы по второму нажатию он давал обратный эффект?(задвигался и принял значение хайд)

почему нет? я нашёл что-то похожее. хитрость путём чекбокса менять состояние true/false. если состояние true, то применяется стиль, при другом состоянии - наоборот:

.del { display: none; border:1px solid red;}
.del:not(:checked) + label + * { display: none;} /* фактически нужна только одна строка */

/* вид CSS кнопки */
.del:not(:checked) + label,
.del:checked + label {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 2px;
  color: #fff;
  background: #4e6473;
  cursor: pointer;
}
.del:checked + label {
  background: #e36443;
}
</style>

<input type="checkbox" id="raz" class="del" checked="checked"/><label for="raz" class="del">нажать</label><div>исчезающий текст</div>

осталось красиво анимировать