Показать сообщение отдельно
  #5 (permalink)  
Старый 24.12.2018, 16:33
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,791

<div class="col-lg-3 col-md-4 col-12" style="justify-content: stretch; display: flex;">
    <div class="row m-0">
        <div class="col-md-12 col-5 p-0">
            <img class="product-img" src="img/towar1.png" alt="Суши">
        </div>
        <div class="col-md-12 col-7 p-0">
            <div class="product-details">
                <div class="d-flex justify-content-between">
                    <h2 class="product-title">Авокадо2</h2>
                    <img class="detailed" src="img/q.svg" alt="Вопросик">
                </div>
                <div class="description block-on-js show-t">
                    <p class="product-description">Классический японский ролл со свежим авокадо и кунжутом Классический японский ролл со свежим авокадо и кунжутом</p>
                </div>
                <div class="more-opt product-description">
                    <p>Калории: 180</p>
                    <p>Состав: Рис, нори, авокадо.</p>
                </div>
                <div>
                    <p class="pt-lg-3 product-price-block">
                        <span class="">
												<span class="weight">1500 г.</span>
                        <span class="price">1200 р.</span>
                        </span>
                        <span>
												<a href="#" class="badge badge-warning cart-btn">В корзину</a>
											</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="col-lg-3 col-md-4 col-12">
    <div class="row m-0">
        <div class="col-md-12 col-5 p-0">
            <img class="product-img" src="img/towar1.png" alt="Суши">
        </div>
        <div class="col-md-12 col-7 p-0">
            <div class="product-details">
                <div class="d-flex justify-content-between">
                    <h2 class="product-title">Авокадо</h2>
                    <img class="detailed" src="img/q.svg" alt="Вопросик">
                </div>
                <div class="">
                    <div class="description block-on-js">
                        <p class="product-description">Классический японский ролл со свежим авокадо и кунжутом Классический японский ролл со свежим авокадо и кунжутомКлассический японский ролл со свежим авокадо и кунжутом Классический японский ролл со свежим авокадо и кунжутом</p>
                    </div>
                    <div class="more-opt product-description">
                        <p>Калории: 180</p>
                        <p>Состав: Рис, нори, авокадо.</p>
                    </div>
                    <p class="pt-3 product-price-block">
                        <span class="">
													<span class="weight">1500 г.</span>
                        <span class="price">1200р.</span>
                        </span>
                        <span>
													<a href="#" class="badge badge-warning cart-btn">В корзину</a>
												</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
<style>.more-opt{display:none}</style>
<script>
const items = document.querySelectorAll('.product-details');
let activeElement;

const toggle = function(showOptions) {
    this.querySelectorAll('.more-opt,.description').forEach(function(node) {
        node.style.display = showOptions !== node.classList.contains('description') ? 'block' : 'none';
    });
};

items.forEach(function(item) {
    item.querySelector('.detailed').addEventListener('click', function() {
        const isActive = activeElement === item;
        if (!isActive && activeElement)
            toggle.call(activeElement, false);

        activeElement = isActive ? undefined : item;

        toggle.call(item, !isActive);
    });
});
</script>
Ответить с цитированием