JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div class="span12">
            <i class="icon-chevron-up" data-status="true" id="arrow">кликни на меня</i>
    </div>
  <form action="adress" id="form" method="get">     
     <div class="span12 my-form" style="display: block;">
Тут форма:<br>zzz<br>zzz<br>zzz<br><br>zzz<br>zzz<br>zzz<br>
     </div>
  </form>
</div>

CSS

.my-form {
  width: 100%;
  margin-left: 0;
  padding-top: 15px;
  border: 1px solid #CCCCCC;
  border-top: none;
  overflow: hidden;
}

JavaScript

$("#arrow").click(function () {
    if ($("[data-status]").attr('data-status') == "true") {
        $("[data-status]").attr('data-status', false);
        $(".my-form").slideUp(400, function () {
            $("[data-status]").removeClass("icon-chevron-down").addClass("icon-chevron-down");
        });
    } else {
        $("[data-status]").attr('data-status', true);
        $(".my-form").slideDown(400, function () {
            $("[data-status]").removeClass("icon-chevron-down").addClass("icon-chevron-up");
        });
    }
});