Открытие и закрытие блоков по клику

[helen2014]

Помогите с реализацией!

Нужно сделать что бы все блоки в подвале раздвигались.

Сам код такой:

  Показати вміст

      <div class="footer-col-1 col-xs-12 col-sm-6 col-md-3">
        <div class="title-f  open">Информация</div>
        <ul class="list-unstyled item">
          <li><a href="#"></a></li>
         <li><a href="#"></a></li>

         <li><a href="#"></a></li>
        </ul>
      </div>
      <div class="footer-col-2 col-xs-12 col-sm-6 col-md-3">
        <div class="title-f  open">Категории</div>
        <ul class="list-unstyled item">
          <li><a href="#"></a></li>
         <li><a href="#"></a></li>

         <li><a href="#"></a></li>
        </ul>
      </div>

      <div class="footer-col-3 col-xs-12 col-sm-6 col-md-3">
        <div class="title-f  open">Личный кабинет</div>
        <ul class="list-unstyled item">
          <li><a href="#"></a></li>
         <li><a href="#"></a></li>

         <li><a href="#"></a></li>
        </ul>
      </div>

По умолчанию все блоки отключены

footer ul.item {

display:none;
}

Помогите с написанием скрипта!

<script><!--
$(document).on('click', '.open', function(){
  $(this).siblings('.list-unstyled').toggleClass('item');
});
//--></script>

 

Нужно реализовать так чтобы при клике на любой другой блок, должен закрываться предыдущий если он открыт.

Сейчас не скрываются и остаются все открытыми.

И отключить выполнения скрипта если ширина монитора больше чем 992px.

Змінено 13 грудня 2020 користувачем helen2014

[Prooksius]

вместо строчки

$(this).siblings('.list-unstyled').toggleClass('item');

попробуйте вставить примерно такое

$('.title-f.open + .list-unstyled').removeClass('item');
$(this).siblings('.list-unstyled').addClass('item');

тут первая строчка закрывает все, а вторая открывает нажатый

[Prooksius]

  В 13.12.2020 в 18:22, helen2014 сказав:

  Показати вміст

      <div class="footer-col-1 col-xs-12 col-sm-6 col-md-3">
        <div class="title-f  open">Информация</div>
        <ul class="list-unstyled item">
          <li><a href="#"></a></li>
         <li><a href="#"></a></li>

         <li><a href="#"></a></li>
        </ul>
      </div>
      <div class="footer-col-2 col-xs-12 col-sm-6 col-md-3">
        <div class="title-f  open">Категории</div>
        <ul class="list-unstyled item">
          <li><a href="#"></a></li>
         <li><a href="#"></a></li>

         <li><a href="#"></a></li>
        </ul>
      </div>

      <div class="footer-col-3 col-xs-12 col-sm-6 col-md-3">
        <div class="title-f  open">Личный кабинет</div>
        <ul class="list-unstyled item">
          <li><a href="#"></a></li>
         <li><a href="#"></a></li>

         <li><a href="#"></a></li>
        </ul>
      </div>

И отключить выполнения скрипта если ширина монитора больше чем 992px.

Expand  

if ($(window).width() <= 992) {

  те мои две строчки

}

[fanatic]

$(function(){
    $('.open').click(function(){
        if($(window).width() <= 992){
            return;
        };
        
        if($(this).next().is(":visible")){
            $(this).next().hide();
        }else{
            $('.list-unstyled').hide();
            $(this).next().show();
        }
    })
})

 

[Prooksius]

  В 13.12.2020 в 19:01, fanatic сказав:

$(function(){
    $('.open').click(function(){
        $('.list-unstyled').hide();
        $(this).next().show();
    })
})

 

Expand  

или для красоты вместо hide() - slideUp(), вместо show() - slideDown()

[helen2014]

  В 13.12.2020 в 18:36, Prooksius сказав:

if ($(window).width() <= 992) {

  те мои две строчки

}

Expand  

 

  В 13.12.2020 в 18:30, Prooksius сказав:

вместо строчки

$(this).siblings('.list-unstyled').toggleClass('item');

попробуйте вставить примерно такое

$('.title-f.open + .list-unstyled').removeClass('item');
$(this).siblings('.list-unstyled').addClass('item');

тут первая строчка закрывает все, а вторая открывает нажатый

Expand  

Сделали по вашему примеру.

Скрывается и открывается как о хаотично.

[Prooksius]

да, немного не так
 надо

$('.title-f.open + .list-unstyled').addClass('item');
$(this).siblings('.list-unstyled').removeClass('item');

у вас же добавление класса скрывает, а не удаление

[helen2014]

  В 13.12.2020 в 19:08, Prooksius сказав:

да, немного не так
 надо

$('.title-f.open + .list-unstyled').addClass('item');
$(this).siblings('.list-unstyled').removeClass('item');

у вас же добавление класса скрывает, а не удаление

Expand  

Да, теперь работает все как надо!

Спасибо большое!

[helen2014]

  В 13.12.2020 в 19:08, Prooksius сказав:

да, немного не так
 надо

$('.title-f.open + .list-unstyled').addClass('item');
$(this).siblings('.list-unstyled').removeClass('item');

у вас же добавление класса скрывает, а не удаление

Expand  

Еще один момент!

При клике на заголовок открывается блок.

Но он также должен скрываться при клике по этому же заголовку.

Сейчас он скрывается только при клике на другой заголовок.

Но и этот блок не закрыть если кликнуть по этому же заголовку.

 

[fanatic]

  В 14.12.2020 в 09:08, helen2014 сказав:

Но он также должен скрываться при клике по этому же заголовку.

Expand  

 

  В 13.12.2020 в 19:01, fanatic сказав:

if($(this).next().is(":visible")){ $(this).next().hide(); }else{ $('.list-unstyled').hide(); $(this).next().show(); }

Expand  

 

[helen2014]

  В 14.12.2020 в 09:13, fanatic сказав:

if($(this).next().is(":visible")){ $(this).next().hide(); }else{ $('.list-unstyled').hide(); $(this).next().show(); }

Expand  

Спасибо, помогло!

[helen2014]

Остался вопрос с поворотом иконки при открытии блока.

      <div class="footer-col-1 col-xs-12 col-sm-6 col-md-3">
        <div class="title-f  open">Информация<span class="icon-footer-arrow"><i class="fa fa-angle-down"></i></span></div>
        <ul class="list-unstyled item">
          <li><a href="#"></a></li>
         <li><a href="#"></a></li>

         <li><a href="#"></a></li>
        </ul>
      </div>

Иконка в самом заголовке.

У меня получается что заголовок в месте с иконкой поворачиваются на 180 градусов.

Помогите добавить в скрипт поворот иконки на 180 градусов.

<script><!--
$(document).on('click', '.open', function(){
if ($(window).width() <= 991) {
$('.title-f.open + .list-unstyled').addClass('item');
$(this).siblings('.list-unstyled').removeClass('item');
}
if($(this).next().is(":visible")){ $(this).next().hide(); }else{ $('.list-unstyled').hide(); $(this).next().show();
}
});
//--></script>