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

[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 минут назад, 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.

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]

Только что, fanatic сказал:

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

 

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

[helen2014]

22 минуты назад, Prooksius сказал:

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

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

}

 

29 минут назад, Prooksius сказал:

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

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

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

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

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

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

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

[Prooksius]

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

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

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

[helen2014]

6 минут назад, Prooksius сказал:

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

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

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

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

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

[helen2014]

13 часов назад, Prooksius сказал:

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

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

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

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

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

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

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

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

 

[fanatic]

5 минут назад, helen2014 сказал:

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

 

14 часов назад, fanatic сказал:

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

 

[helen2014]

В 14.12.2020 в 12:13, fanatic сказал:

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

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

[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>