vitaliy-p
8/18/2015 - 11:24 AM

Vertical collapse

Vertical collapse

<div class="collapse-content js-collap-wrap">

    <div class="collapse-content__item">
        <p class="collapse-content__title js-collap-ln"><span class="collapse-content__inner" role="button">Показ рекламы на поиске</span></p>
        <div class="collapse-content__details js-collap-content">


        </div>
    </div>

    <div class="collapse-content__item">
        <p class="collapse-content__title js-collap-ln"><span class="collapse-content__inner" role="button">Показ рекламы в РСЯ</span></p>
        <div class="collapse-content__details js-collap-content">


        </div>
    </div>

    <div class="collapse-content__item">
        <p class="collapse-content__title js-collap-ln"><span class="collapse-content__inner" role="button">Ретаргетинг</span></p>
        <div class="collapse-content__details js-collap-content">


        </div>
    </div>

</div>
        var SimpleCollapse = function() {
            var self = this,
                collapse = $('.js-collap-wrap');

            collapse.each(function() {
                console.log('kek');
                var $index = $(this).find('.js-collap-ln.is-active');
                $index.next().addClass('is-open').slideDown(400);
            });

            collapse.on('click', '.js-collap-ln', function(event) {
                self.open($(this), event);
                // return false;
            });

            self.open = function(elem, event) {
                event.preventDefault();
                var parentCollapse = elem.closest(collapse);

                parentCollapse.find('.is-open').removeClass('is-open').slideUp(400);
                parentCollapse.find('.is-active').removeClass('is-active');

                elem.next().addClass('is-open').slideDown(400);
                elem.addClass('is-active');
            
            };

        };

        var simpleCollapse = new SimpleCollapse();