Slider down и slide up с библиотекой jquery

Question

Есть такая верстка
<a class="edit-btn">
   <img src="/images/edit.png"/>
</a>
    
<div class="col-lg-12 edit-fio">
   <input type="text" value="<?echo $user['fio']?>" class="form-control"/>
   &nbsp;&nbsp;
   <img src="/images/save.png" style="height: 21px;"/>
</div>

Ниже скрипт

<script>
    $(document).ready(function () {
        $('.edit-btn').click(function(){
            $('.edit-fio').slideDown();
        });
        
    });
    </script>

Сейчас при нажатии на иконку блок раскрывается. А как сделать, что бы при нажатии опять на эту же иконку блок закрывался. Нужно как то проверять состояние блока? открыт он или нет?

Answer 1

const $div = $(`div`);

$(`button`).click(() => {
  $div.stop(true).slideToggle();
});

div {
  width: 300px;
  height: 300px;
  border: 1px dashed purple;
  background-color: gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button">Toggle</button>
<div></div>

БЛОГ НА HUSL

Slider down и slide up с библиотекой jquery

Ответы (1 шт):