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

Как всегда, на связи с Вами Роман и сегодня я подготовил небольшое продолжение темы, которая уже поднималась у нас на проекте, а именно аккордеон для сайта. Но сегодня мы будем делать его по идентификатору и данный скрипт просто будет дополнять старую версию исходных примеров. Также всех хочу поздравить с днем знаний, который прошел вчера, как обычно, 1 сентября и желаю Вам успехов в учебе, всегда быть на высоте и конечно же, повышать свой профессионализм, кто уже активно занимается чем-то серьезным.

Прежде чем начать, хочу немного упомянуть о теме API VK личных сообщений, я немного конечно же с ней затянул, на это есть свои причины, хоть они не слишком весомые, но все же от дела оторвали, об этом расскажу может быть в следующий раз. Но, а пока что, давайте перейдем к написанию простого скрипта на JS.

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

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

Теперь нам потребуется создать тег a, который будет содержать идентификатор accordeon. В нем указываем стрелочку вниз с помощью символа юникода, Вы в принципе можете ставить, что сами захотите. Далее прописываем скрываемый div блок, с идентификатором list, в котором будем хранить сам текст или какую-то другую информацию. В принципе все, остальное дело за CSS и JS.

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

По поводу CSS, важным свойством тут является только display:none, которое относится к идентификатору list.

Свойство нужно только для того, чтобы скрывать элемент при первом появлении на экран.

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

Переходим к самому скрипту и тут сразу отмечу, что весь процесс делится на две части - до и после выполнения скрипта. Для начала мы загружаем функцию, в которой придаем идентификатору accordeon действие по клику. Далее нам потребуется создать функцию main, которая будет содержать в себе условие, при котором будет как раз скрываться или показываться данный блок с идентификатором list. Далее просто выводим функцию main в нашем документе и на этом все!

window.onload= function() {
	document.getElementById('accordeon').onclick = function() {
	main('list', this);
	};
};
function main(id, accordeon) {
	var listing = document.getElementById(id);
	if(listing.style.display == 'block') {
		listing.style.display = 'none';
		accordeon.innerHTML = '˅';
	}
	else {
		listing.style.display = 'block';
		accordeon.innerHTML = '˄';
	}
}

Вот такое вот, простое дополнение к нашим примерам по аккордеону для сайта получилось. Возможно, кому то потребуется данный скрипт переписать под классы, тут тогда немного придется сделать по другому структуру js скрипта, кто не поймет, пишите, разберемся! А на этом, я с Вами прощаюсь, до скорого!