Аккордеон в обратную сторону

371

25 ноября 2017, 11:54

Все аккордеоны открывают контент вниз методом next(), как мне сделать чтобы кнопка всегда была внизу, а текст скрытый аккордеоном открывался вверх ? Пытался сделать вот так, но не работает. Текст открывает, а закрывать уже не желает)

<div id="#text"></div>
<div class="btn"></div>
$('.btn').prev().hide();
$('.btn').click(function() {
  $(this).prev().slideDown();
  $('.btn').not(this).prev().stop(true, true).slideUp();
});

Answer 1

<!DOCTYPE html>
<html>
<head>
    <title>Acardeon</title>
    <meta charset="utf-8" />
    <script src="js/jquery-3.2.1.min.js"></script>
    <style>
        /* Стили для кнопок, которые используются для открытия/закрытия панелей акардиона */
        button.accordion {
            background-color: #eee;
            color: #444;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            text-align: left;
            border: none;
            outline: none;
            transition: 0.4s;
        }
            /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
            button.accordion.active, button.accordion:hover {
                background-color: #ccc;
            }
        /* Стили для панели.*/
        div.panel {
            padding: 0 18px;
            background-color: white;
            display: none;
        }
    </style>
    <script>
        $(function () {
            $(".accordion").click(function () {
                $(this).toggleClass("active");
                var panel = $(this).prev();
                if (panel.css("display") === "block") {
                    panel.css("display", "none");
                } else {
                    panel.css("display", "block");
                }
            });
        });
    </script>
</head>
<body>
    <h2>Accordion</h2>
    <div class="panel">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
            nisi ut aliquip ex ea commodo consequat.
        </p>
    </div>
    <button class="accordion">Section 1</button>
    <div class="panel">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
            nisi ut aliquip ex ea commodo consequat.
        </p>
    </div>
    <button class="accordion">Section 2</button>
</body>
</html>

Answer 2

Если использовать чистый JS:

Открываемый блок ставим выше нашего handler'а, который будет взаимодействовать с предыдущим объектом, который будет являться раскрываемым блоком.

Создаем переменную, которая отталкивается от нашего handler'а, и поднимаемся выше к нужному элементу через previousElementSibling (преимущество использования данного метода перед previousSibling в том, что он возвращает сам элемен, а не его text node).

Далее работаем с нашим раскрывающимся блоком: добавляем/убираем классы, ставим/убираем высоту.

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

Используя все вышеперечисленное получаем это:

const handlers = document.querySelectorAll('.handler'); 
handlers.forEach(handler => { 
	const item = handler.previousElementSibling; 
	let isOpened = false; 
	handler.addEventListener('click', function(){ 
		if(!isOpened) { 
			item.classList.add('active') 
		} else { 
			item.classList.remove('active') 
		} 
		isOpened = !isOpened; 
	}) 
})

* { 
	box-sizing: border-box; 
} 
.item { 
	height: 0; 
	overflow: hidden; 
} 
.item.active { 
	height: 100% 
} 
.handler { 
	padding: 5px; 
	border: 1px solid rgba(0,0,0,.3); 
	margin-bottom: 2px; 
	display: inline-block; 
	cursor: pointer; 
}

<div class="accordion"> 
	<div class="item"> 
		<div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus cupiditate dolorem officia! Eius assumenda labore id aperiam voluptatum ex sed?</div> 
	</div> 
	<div class="handler">Развернуть</div> 
	<div class="item"> 
		<div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus cupiditate dolorem officia! Eius assumenda labore id aperiam voluptatum ex sed?</div> 
	</div> 
	<div class="handler">Развернуть</div> 
	<div class="item"> 
		<div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus cupiditate dolorem officia! Eius assumenda labore id aperiam voluptatum ex sed?</div> 
	</div> 
	<div class="handler">Развернуть</div> 
</div>