11 сентября 2017
3402
Аккордеон для сайта

Аккордеон для сайта по CLASS

JavaScript
Демонстрация » Скачать »

Ребята, всем привет! Рад что Вы нашли время для ознакомления с данным материалом, а я постараюсь в свою очередь рассказать все по подробнее. Сегодня мы научимся создавать аккордеон для сайта по классу, а не по идентификатору, как в прошлом уроке, а также реализуем простой функционал на JavaScript. Практически весь функционал аккордеона для сайта по id нам потребуется в данном уроке, поэтому удаляем только некоторые моменты, а вернее их часть.

 

Так как материал я подготовил еще и в видео формате, поэтому вкратце тут пробежимся по теме. Объясню что, как и для чего, если кому-то будет не ясно, оставляйте комментарии, с радостью отвечу)

Но все же, я стараюсь объяснять доступно, разжевывать, может это и смешно, зато меньше вопросов)

 

 

 

Первый шаг. HTML + CSS

 

Сразу приступаем к подключению файла стилей demo.css и скрипт main.js. Больше нам в принципе, ничего и не потребуется.

 

<link rel="stylesheet" href="css/demo.css">
<script src="js/main.js"></script>

 

Теперь все по аналогии, как и в прошлом уроке, за исключением, что нам теперь вместо идентификатора, потребуются классы.

 

RootHelp, аккордеон, по классу, <a class='accordeon'>&#709;</a>
<div class='list'>сайт, RootHelp.ru, аккордеон для сайта</div><br>

RootHelp, аккордеон, по классу, <a class='accordeon'>&#709;</a>
<div class='list'>сайт, RootHelp.ru, аккордеон для сайта</div><br>  

 

Переходим к стилям CSS и тут опять же, меняем только идентификаторы, на классы.

 

.accordeon{
	cursor:pointer;
	color:#000055;
	font-weight:bold;
}
.list{
	display:none;
}

 

 

Второй шаг. JS

 

Переходим к изменению JavaScript кода. Весь код переписывать не будем, оставим условие, которое нам еще приходится, а также событие onload. Для начала потребуется создать переменную, допустим btn, в которую запишем метод document.querySelectorAll() с классом accordeon, соответствующий классам на HTML странице.

 

querySelectorAll

 

Затем нам потребуется цикл for, в который запишем перечисление нумерации элементов переменной btn. Ведь мы уже работаем не с одним элементом, а с целым массивом. Для этого прописываем в цикл for значения, начиная с нулевого аргумента и до размера длины его последнего значения.

Далее внутрь цикла нам потребуется записать данные элементы, для этого создаем переменную btn с нумерацией по циклу, в которую запишем метод addEventListener().

 

addEventListener

 

Целевым объектом может быть объект Element, Document или любой другой объект имеющий события, например, такой как Window. Метод поддерживает следующие аргументы - это тип события, обработчик и фразу. Далее мы копируем условие, с предыдущего урока и заменяем свойство Listing на nextElementSibling, с помощью которого можно получить соседа снизу, или по простому следующий элемент.

 

nextElementSibling

 

Также существует свойство PreviousElementSibling, которое работает также, как и предыдущее, но с одним условием, оно возвращает соседа сверху. Также меняем данное свойство в самом условии, так как иначе ничего работать у нас не будет.

 

window.onload= function() {
    var btn = document.querySelectorAll('.accordeon');
    for(i=0; i < btn.length; i++){
        btn[i].addEventListener('click', function(){
          	if(this.nextElementSibling.style.display == 'block') {
                this.nextElementSibling.style.display = 'none';
                accordeon.innerHTML = '&#709;';
            }
            else {
                this.nextElementSibling.style.display = 'block';
                accordeon.innerHTML = '&#708;';
            }  
        });
    }
};

 

На этом как бы все, большое спасибо за внимание! Надеюсь, все объяснил доходчиво) Не забывайте оставлять лайки, комментарии и по возможности подписывайтесь на наши соц.сети ниже, чтобы не пропустить новые материалы, которые не всегда публикуются именно на сайте)