If you're having a lot of content on your web page and too many details about price, sizes, or sub-content. So, this is for you and the perfect solution to solve the problem.
In this post, we will learn about the Accordion. Accordion is a menu composed of vertical headers. The menu reveals the content or more details. When you triggered the Icon. An accordion is the best solution for too much content and optimizing the web pages. An accordion is the common element pattern for the responsive design. So,
$ads={1}
What is an accordion in web design
In web design the process of designing the visual look and feel of the website layout. If the website is represented by the user experience aspects but the website has a lot of content and the page scroll more the user experience feels low and that cause an accordion helps to optimize and accordion is a type of menu that displays a list of the headers like a stack one by one. When the users interact with the accordion, it shows the content and hides.
It is always ideal for mobile responsiveness and it reduces the number of users has to scroll much less. The main thing in the accordion web design is used. A FAQ page of a website can improve the user experience.
Read also : How to add Html Responsive table in Blogger and Wordpress
Many people are visiting a website to find an answer to one or two questions only. So, FAQ pages do the work.
An accordion UI design is more interesting it's as also makes use of colors, symbols, and subtitles buttons to form submission.
HTML Code:-
<div class="container py-5">
<div class="row">
<div class="col-lg-6 order-lg-2">
<figure><img class="img-thumbnail sizes" src="front.png" alt="" /></figure>
</div>
<div class="col-lg-6">
<h2 class="text-uppercase text-line text-primary mb-3 text-size">Frequently Asked Question:</h2>
<h3 class="display-7 mb-7 py-3">Best Accordion Design in Dailyaspirants .</h3>
<div class="accordion ds-accordion" id="accordionExample">
<div class="card clean-white accordion-item">
<div class="card-header" id="headingOne">
<button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
What is seo search?
</button>
</div>
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="card-body">
<strong>Lorem Ipsum.</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</div>
</div>
</div>
<div class="card clean-white accordion-item">
<div class="card-header" id="headingTwo">
<button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Explain server in PHP
</button>
</div>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="card-body">
<strong>Lorem Ipsum.</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</div>
</div>
</div>
<div class="card clean-white accordion-item">
<div class="card-header" id="headingThree">
<button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
what is Cloud Computing tutorial?
</button>
</div>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="card-body">
<strong>Lorem Ipsum.</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</div>
</div>
</div>
</div>
</div>
</div>
</div>
custom.css
*
{
margin:0;
padding:0;
}
body
{
font-family: 'Poppins', sans-serif;
height:900px;
}
.ds-accordion
{
border:0 !important;
}
.ds-accordion .card.clean-white
{
background:none !important;
border: 0 !important;
box-shadow:none !important;
}
.ds-accordion .card-header{
margin-bottom: 0;
border: 0 !important;
background: none !important;
}
.ds-accordion .card.clean-white .card-header {
padding: 0 0 0.8rem 0;
}
.ds-accordion .card.clean-white .card-body
{
width:85%;
padding: 0 0 0 2.5rem !important;
text-align:justify;
margin-bottom:1.5rem;
font-weight:300;
}
.ds-accordion .card-header button{
background: none;
cursor: pointer;
width: 100%;
text-align: left;
margin: 0;
border: 0;
font-weight: 700;
transition: all 150ms ease-in-out;
}
.text-size {
font-size: 1rem !important;
font-weight:600;
}
.accordion-button
{
box-shadow:none !important;
}
.img-thumbnail
{
height:auto !important;
border:0 !important;
}
.img-thumbnail.sizes
{
margin:2.25rem 0;
}
Conclusion:-
Accordions can help to improve the user experiences, for mobile responsive websites. Using of Accordion in your website design has roost of the important information leave it place and the peoples are easy to ideal to the users. I hope you will learn. How to create an Accordion UI design thank you.