Создайте аккордеон с помощью HTML и CSS. В этом уроке вы узнаете, как создать аккордеон с помощью HTML, CSS и Javascript. Как известно, аккордеон — это элемент, содержащий вертикально расположенный список элементов, таких как ярлыки, миниатюры и т.д. Стандартным примером аккордеона является операция «Показать/Скрыть» содержимого, но расширенная до нескольких разделов в списке.
Зачем мы создаем аккордеон?
Мы должны использовать аккордеон, когда у нас большой контент. Это уменьшит сложность нашего контента, добавив переключатель туда, куда мы хотим. Они будут скрывать весь контент, но когда пользователь захочет прочитать, ему нужно будет просто нажать на тумблер и увидеть контент, соответствующий заголовку тумблера. Итак, давайте начнем писать HTML CSS и javascript код для создания нашего отзывчивого аккордеона. Если у вас нет опыта в веб-разработке, то вам необходимо изучить HTML Online.
Прежде всего, откройте текстовый редактор, в котором вы хотите написать код. После этого создайте файл и назовите его Index.html. Все готово, просто скопируйте приведенный ниже код и вставьте его в HTML-файл.
HTML-код
<button style="background-color:#ab2073;color:#fff;" class="soft-accordion">Accordion 1</button>
<div class="section">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English..</p>
</div>
<button style="background-color:#b71dbf;color:#fff;" class="soft-accordion">Accordion 2</button>
<div class="section">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
</div>
<button style="background-color:#d61a2d;color:#fff;" class="soft-accordion">Accordion 3</button>
<div id="foo" class="section">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
</div>
Код CSS
<style>
button.soft-accordion { background-color: #eee; color: #444;
cursor: pointer; padding: 18px; width: 100%;
border: none; text-align: left; outline: none;
font-size: 15px; transition: 0.4s;}
button.soft-accordion.active, button.soft-accordion:hover {
background-color: #ddd;}
button.soft-accordion:after { content: ' 2795';
font-size: 13px; color: #fff;
float: right; margin-left: 5px;
}
button.soft-accordion.active:after { content: "2796";}
div.section {
padding: 0 18px; background-color: white;
max-height: 0; overflow: hidden;
transition: 0.6s ease-in-out; opacity: 0;}
div.section.show { opacity: 1; max-height: 500px; }
</style>
Код Javascript:
<script>
var acc = document.getElementsByClassName("soft-accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}}
</script>
Итак, вы все сделали, просто скопируйте весь HTML CSS и java код и поместите его туда, где вы хотите показать Accordion. Пожалуйста, дайте мне знать, как эта статья была полезна в комментариях ниже.
Посетите наш сайт, чтобы изучить WordPress, цифровой маркетинг, поисковую оптимизацию, программирование. https://softcodeon.com.