Раскрывающийся список
Для создания отдельного элемента необходимо создать div.accordion-item. Все элементы (даже если он 1) необходимо поместить внутрь div.accordion-items.
Внутри каждого элемента ( div.accordion-item ) есть ссылка для раскрытия a.accordion-button и контент div.accordion-collapse.
Для добавления отступов внутри div.accordion-collapse необходимо поместить контент в div.accordion-body
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
<div class="accordion-items">
<div class="accordion-item">
<a class="accordion-button">Заголовок</a>
<div class="accordion-collapse">
<div class="accordion-body">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
</div>
</div>
Несколько элементов:
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil placeat quaerat voluptate libero in dignissimos delectus debitis reprehenderit, deleniti quasi ad dolore temporibus, nesciunt assumenda voluptatem quam quia nisi aut.
<div class="accordion-items">
<div class="accordion-item">
<a class="accordion-button">Заголовок</a>
<div class="accordion-collapse">
<div class="accordion-body">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="accordion-item">
<a class="accordion-button">Заголовок 2</a>
<div class="accordion-collapse">
<div class="accordion-body">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="accordion-item">
<a class="accordion-button">Заголовок 3</a>
<div class="accordion-collapse">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil placeat quaerat voluptate libero in dignissimos delectus debitis reprehenderit, deleniti quasi ad dolore temporibus, nesciunt assumenda voluptatem quam quia nisi aut.</p>
</div>
</div>
</div>
</div>
Пример посложнее:
Бэйханьский университет
- Количество мест на программе: 3
- Уровень обмена: бакалавриат, магистратура
- Доступные программы: программа академической мобильности (1 семестр)
- Минимальный уровень знания языка: английский В1
Шанхайский транспортный университет
- Количество мест на программе: 3
- Уровень обмена: бакалавриат, магистратура
- Доступные программы: программа академической мобильности (1 семестр)
- Минимальный уровень знания языка: английский В1
Бэйханьский университет
- Количество мест на программе: 3
- Уровень обмена: бакалавриат, магистратура
- Доступные программы: программа академической мобильности (1 семестр)
- Минимальный уровень знания языка: английский В1
Пекинский политехнический институт
- Количество мест на программе: 3
- Уровень обмена: бакалавриат, магистратура
- Доступные программы: программа академической мобильности (1 семестр)
- Минимальный уровень знания языка: английский В1
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil placeat quaerat voluptate libero in dignissimos delectus debitis reprehenderit, deleniti quasi ad dolore temporibus, nesciunt assumenda voluptatem quam quia nisi aut.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil placeat quaerat voluptate libero in dignissimos delectus debitis reprehenderit, deleniti quasi ad dolore temporibus, nesciunt assumenda voluptatem quam quia nisi aut.
<div class="accordion-items">
<div class="accordion-item">
<a class="accordion-button">Аргентина</a>
<div class="accordion-collapse">
<div class="accordion-body">
<p class="fw-semi-bold">Бэйханьский университет</p>
<ul>
<li>Количество мест на программе: 3</li>
<li>Уровень обмена: бакалавриат, магистратура</li>
<li>Доступные программы: программа академической мобильности (1 семестр)</li>
<li>Минимальный уровень знания языка: английский В1</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<a class="accordion-button">Китай</a>
<div class="accordion-collapse">
<div class="accordion-body">
<p class="fw-semi-bold">Шанхайский транспортный университет</p>
<ul>
<li>Количество мест на программе: 3</li>
<li>Уровень обмена: бакалавриат, магистратура</li>
<li>Доступные программы: программа академической мобильности (1 семестр)</li>
<li>Минимальный уровень знания языка: английский В1</li>
</ul>
<a target="_blank" href="#">Factsheet</a>
<div class="border-top mx-auto my-3 w-100"></div>
<p class="fw-semi-bold">Бэйханьский университет</p>
<ul>
<li>Количество мест на программе: 3</li>
<li>Уровень обмена: бакалавриат, магистратура</li>
<li>Доступные программы: программа академической мобильности (1 семестр)</li>
<li>Минимальный уровень знания языка: английский В1</li>
</ul>
<a target="_blank" href="#">Factsheet</a>
<div class="border-top mx-auto my-3 w-100"></div>
<p class="fw-semi-bold">Пекинский политехнический институт</p>
<ul>
<li>Количество мест на программе: 3</li>
<li>Уровень обмена: бакалавриат, магистратура</li>
<li>Доступные программы: программа академической мобильности (1 семестр)</li>
<li>Минимальный уровень знания языка: английский В1</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<a class="accordion-button">Австрия</a>
<div class="accordion-collapse">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil placeat quaerat voluptate libero in dignissimos delectus debitis reprehenderit, deleniti quasi ad dolore temporibus, nesciunt assumenda voluptatem quam quia nisi aut.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil placeat quaerat voluptate libero in dignissimos delectus debitis reprehenderit, deleniti quasi ad dolore temporibus, nesciunt assumenda voluptatem quam quia nisi aut.</p>
</div>
</div>
</div>
</div>