Поискал быстрые решения в Vue Js для организации аккордеона.
Поисковики выдают только какие-то плагины.
Но, для такого небольшого функционала подключать плагин не хочется.
Да и если подключать на каждый чих плагин, то потом будет сложно поддерживать такой зверинец.
Поэтому написал простой код. И делюсь им:

Пример работающего аккордеона на vue js можно посмотреть здесь:
http://zufar.ru/examples/vuejs/vuejs_accordion_ru.html

Итак сначала наш html-код:


<div class="accordion" id="accordion">
	
<div class="accordion-item">
		
<h3 class="accordion-item-head" v-on:click="accordion">
			Первый пункт
		</h3>

		
<div class="accordion-item-body">
			Кто, по-вашему, этот мощный старик? Не говорите, вы не можете этого знать. Это — гигант мысли, отец русской демократии и особа, приближенная к императору.
		</div>

	</div>


	
<div class="accordion-item">
		
<h3 class="accordion-item-head" v-on:click="accordion">
			Второй пункт
		</h3>

		
<div class="accordion-item-body"> 
				Кто, по-вашему, этот мощный старик? Не говорите, вы не можете этого знать. Это — гигант мысли, отец русской демократии и особа, приближенная к императору.
		</div>

	</div>


	
<div class="accordion-item">
		
<h3 class="accordion-item-head" v-on:click="accordion">
			Третий пункт
		</h3>

		
<div class="accordion-item-body">
				Кто, по-вашему, этот мощный старик? Не говорите, вы не можете этого знать. Это — гигант мысли, отец русской демократии и особа, приближенная к императору.
		</div>

	</div>

</div>

Структура кода здесь простая.
Нам нужно показывать или скрыть блоки с классом .accordion-item-body.
Делать мы будем это с помощью селектора соседних элементов плюса (+):
Вот css-код:

.accordion-item{
	position: relative;
}

.accordion-item-head{
	background-color: #dfdfdf;
	border-top-left-radius: 5px ;
	border-top-right-radius: 5px;
	cursor: pointer;
	padding:10px;
}


.accordion-item-head:after{    
	content: ' > ';
	display: block;
	height: 29px;
	position: absolute;
	right: 25px;
	transform: rotate(90deg) scaleY(2);
	top: 8px;
}

.accordion-item-head.active:after{
	content: ' < ';
}


.accordion-item-body{
	display: none;
} 
.accordion-item-head.active + .accordion-item-body{
	display: block !important;
}

Далее мы подключаем фреймворк VueJs.

И теперь самое главное JavaScript:

var app = new Vue({
    el: '#accordion',
    data: {        
    },
    methods: {
        accordion: function (event) {            

        //Раскомментировать, если нужно, чтобы закрывались остальные пункты при открытии текущего
       // 	var matches = document.querySelectorAll('.accordion-item-head');
       //  	for(var i = 0; i < matches.length; i++) {
       //  		matches[i].classList.remove('active');
       //	 }

             event.target.classList.toggle('active');
        }
    }

});

Здесь тоже все до ужаса просто.
Все основное происходит в этой строке:

event.target.classList.toggle('active');

Мы добавляем заголовку h3 css-класс active.

Затем с помощью css показываем следующий соседний элемент:

.accordion-item-head.active + .accordion-item-body{
	display: block !important;
}

Весь код на jsfiddle:

Рекомендую хостинг:

Комментариев 10 “Vue JS аккордеон. Напишем простой Аккордеон

  1. syuzanna.webmaster@gmail.com on 03.07.2019 at 10:58 пишет:

    Добрый день! У меня не работает , при клике вообще ничего не происходит , не добавляется класс aactive .

  2. Юлия on 22.08.2019 at 15:03 пишет:

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

  3. Настя on 22.08.2019 at 22:45 пишет:

    Не думала что смогу найти, спасибо большое!

  4. Света on 24.08.2019 at 20:47 пишет:

    Не думала что смогу найти, спасибо!

  5. Света on 25.08.2019 at 11:30 пишет:

    Я не думала что найду, спасибо большое!

  6. Света on 25.08.2019 at 19:42 пишет:

    Не совсем поняла как это так?

  7. Лена on 26.08.2019 at 20:39 пишет:

    Не поняла как это так?

  8. Мария on 05.09.2019 at 23:40 пишет:

    Здравствуйте, что то не совсем я поняла как это?

  9. Катя on 16.09.2019 at 13:14 пишет:

    Здравствуйте, не совсем я поняла как это?

  10. Катя on 24.09.2019 at 18:33 пишет:

    Здравствуйте, я не совсем поняла как это?

Добавить комментарий

Ваш e-mail не будет опубликован.

Навигация по записям