Accordion

by Vallek

HTML

<ol class="course">
	<li class="course__item course__item_close">
		<button class="course__heading">Вводное занятие</button>
		<ol class="course__content">
			<li><a href="https://vallek.github.io/web-pres/learning.html">Проблемы образования. Как эффективнее учиться</a></li>
			<li><a href="https://vallek.github.io/web-pres/internet.html">Как устроен Интернет</a></li>
			<li>Начало HTML (язык, синтаксис)</li>
			<li>Редакторы кода</li>
			<li>Первые элементы (p, h1-h6, a, img)</li>
		</ol>	
	</li>
	<li class="course__item course__item_close">
		<button class="course__heading">Основы HTML</button>
		<ol class="course__content">
			<li>Вложенность</li>
			<li>Форматирование текста (em, strong, q, blockquote)</li>
			<li>Форматирование данных (списки, таблицы)</li>
			<li>Начало CSS (первые свойства, стили браузеров)</li>
		</ol>
	</li>
	<li class="course__item course__item_close">
		<button class="course__heading">HTML + CSS</button>
		<ol class="course__content">
			<li>Ввод и отправка данных: формы и кнопки</li>
			<li>Инструменты разработчика, DOM</li>
			<li>Каскадность, специфичность, наследование</li>
			<li>Селекторы</li>
			<li>Стили по умолчанию</li>
			<li>Цвет</li>
		</ol>
	</li>
	<li class="course__item course__item_close">
		<button class="course__heading">HTML + CSS ч.2</button>
		<ol class="course__content">
			<li>Основные раскладки, display</li>
			<li>Позиционирование</li>
			<li>Box Model, отступы</li>
		</ol>
	</li>
	<li class="course__item course__item_close">
		<button class="course__heading">Верстка сайта группы по макету</button>
		<ol class="course__content">
			<li>Планирование, работа с макетом в Фигме</li>
			<li>Семантические элементы (header, main и footer)</li>
			<li>Навигация (nav)</li>
		</ol>
	</li>
	<li class="course__item course__item_close">
		<button class="course__heading">Верстка сайта группы по макету ч.2</button>
		<ol class="course__content">
			<li>Flexbox</li>
			<li>Создание нескольких страниц</li>
			<li>Ссылки между...

CSS

.course-list {
	box-sizing: border-box;
	width: 95%;
	padding-left: 25px;
	margin-top: 0px;
}

.course__content {
	margin-bottom: 20px;
}

.course__content > li {
	margin: 10px 0px;
}

.course__heading {
	display: inline-block;
	background-color: rgba(255,255,255,0);
    cursor:pointer;
    margin:0px 0px 10px 0px;
    padding:10px;
    border: 1px solid #C0C0C0;
    -webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
    box-sizing: border-box;
	word-wrap: break-word;
}

.course__item_close > .course__content {
    height:0px;
    transition:height 1s ease-out;
    -webkit-transform: scaleY(0);
	-o-transform: scaleY(0);
	-ms-transform: scaleY(0);
	transform: scaleY(0);
	display: none;
}

.course__item_close > .course__heading::after {
	content: " \25BC";
}

.course__item_open > .course__heading::after {
	content: " \25B2";
}

JavaScript

let accItem = document.querySelectorAll('.course__item');
let accHeading = document.querySelectorAll('.course__heading');

accHeading.forEach(
    function getClick(el) {
        el.addEventListener('click', toggleItem);
    }
);

function toggleItem() {
    let itemClass = this.parentNode.classList;
    if (itemClass.contains('course__item_open')) {
        this.parentNode.classList.remove('course__item_open');     
        this.parentNode.classList.add('course__item_close');     
    }
    else {
        accItem.forEach(
            function closeIt(it) {
                it.classList.remove('course__item_open');
                it.classList.add('course__item_close');
            }
        );
        this.parentNode.classList.remove('course__item_close'); 
        this.parentNode.classList.add('course__item_open'); 
    }
}