Не подгружается контент(slider slick) в аккордеоне Bootstrap, как это побороть?

Question

[sergey]

Задавался этим вопросом на ru.stackoverflow.com, ответа который бы помог ситуации не получил, а суть вопроса в следующем: есть проект(верстается), на странице Продукция аккордеон на Bootstrap, кликаем по вкладке Цифровые технологии, открывается контент (так должно выглядеть), а вот так выглядит, дальше еще хуже, при клике по кнопке Подробнее должен показаться скрытый контент в т.ч элементы слайдера (Slick), но загружается не все: (то что отобразилось). От слайдера видны только стрелки (там два слайдера) и вот когда уже кликнуть по стрелкам слайдера, то отобразиться и сам слайдер .
На самом деле все это плохо, ибо как только перегрузится страница, все надо начинать сначала. Порывшись в сети, нашел вот такое, что когда блок скрыт через display:none у JS есть проблемы с определением занимаемого им пространства. Потому как он реально не занимает никакого пространства на странице. У меня нужные блоки скрыты через display: none. Как решить эту проблему? Кто в теме помогите?
П.С. На кнопке висит вот такой код:

<a href="#" class="btn-back" onclick="$('div.hide-info1').toggle('normal'); this.text = this.text == 'Свернуть' ? 'Подробнее' : 'Свернуть'; return false">Подробнее<i class="fa fa-angle-right"></i> </a>

код слайдера стандартный:

$('.mini-portfolio-item-slider').on('init', function(event, slick, currentSlide){
        var nrCurrentSlide = slick.currentSlide + 1,
            totalSlidesPerPage = nrCurrentSlide + 3;
        $('.controls').html(nrCurrentSlide + " - " + totalSlidesPerPage + " of " + slick.slideCount);
    });

    $('.mini-portfolio-thumb-slider').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        asNavFor: '.mini-portfolio-item-slider',
        dots: false,
        arrows: true,
        focusOnSelect: true,
        infinite: false
    });

    $('.mini-portfolio-item-slider').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        asNavFor: '.mini-portfolio-thumb-slider',
        infinite: false
    });

После форматирования кода (который посоветовали ниже) ситуация изменилась, но не кардинально, теперь страница грузится вот так, при нажатии на кнопку Подробнее, открывается нормально слайдер, контент. Но когда нажать вторично на кнопку Свернуть, скрывается только часть слайдера, но контент нет. И все кнопка больше не отрабатывает ничего.

Answer 1

[MNB]

Код кнопки

<a href="#" class="btn-back" id="myBtn">Подробнее<i class="fa fa-angle-right"></i> </a>

jabascript

$(document).on('click', '#myBtn', function(e){
   e.preventDefault();
  $('div.hide-info1').toggle('normal', function(){

      // код слайдера

  });
  this.text = this.text == 'Свернуть' ? 'Подробнее' : 'Свернуть';
});

Comments

[sergey]

один момент, кроме слайдера там еще есть контент который спрятан, и отображается при нажатии Подробнее, который теперь не прячется и не отображается

[sergey]

и кнопка один раз срабатывает, и дальше тишина

[MNB]

Я всего лишь хотел показать, что нужно всю логику навесить после клика. Я совсем не собирался разгребать за вас ваше гавно.

[sergey]

MNB: ну и на том спасибо

Answer 2

[Дмитрий]

Инициализируйте слайдер в открываемом блоке только после открытия (смотрите события аккордеона)

Comments

[sergey]

можно по подробнее?

[Дмитрий]

SM: найдите пример event-а для дополнения accordeon на этой странице getbootstrap.com/javascript, вам нужно отслеживать событие "shown.bs.collapse", в callback функцию вставьте кол определния текущего открытого блока аккордеона, нахождения в нем слайдера. Добавьте инициализацию найденного слайдера.

[sergey]

Дмитрий: спасибо

[Дмитрий]

SM: напишите потом, получилось или нет