An animated accordion is a common user interface element that allows you to graphically and interactively present collapsible material.
You can quickly construct an animated accordion that improves the user experience on your website using HTML, CSS, and jQuery. In this video, we will walk you through the steps of creating an animated accordion.
1. Create an accordion using HTML
Let’s begin by creating the fundamental HTML framework for our animated accordion. Create a new HTML file with your favorite text editor. Insert the following code:
<div class="cxc-main">
<h2>jQuery Accordion</h2>
<div class="cxc-title">
<a href="javascript:;" class="cxc-title-text">Codexcoach Solution that work for you<i class="fa fa-plus"></i></a>
<div class="cxc-content">
<p>Lorem Ipsum 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, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</div>
</div>
<div class="cxc-title">
<a href="javascript:;" class="cxc-title-text">Wordpress<i class="fa fa-plus"></i></a>
<div class="cxc-content">
<p>Lorem Ipsum 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, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</div>
</div>
<div class="cxc-title">
<a href="javascript:;" class="cxc-title-text">Css<i class="fa fa-plus"></i></a>
<div class="cxc-content">
<p>Lorem Ipsum 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, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</div>
</div>
<div class="cxc-title">
<a href="javascript:;" class="cxc-title-text">Javascript <i class="fa fa-plus"></i></a>
<div class="cxc-content">
<p>Lorem Ipsum 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, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</div>
</div>
<div class="cxc-title">
<a href="javascript:;" class="cxc-title-text">JQuery<i class="fa fa-plus"></i></a>
<div class="cxc-content">
<p>Lorem Ipsum 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, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</div>
</div>
<div class="cxc-title">
<a href="javascript:;" class="cxc-title-text">About Tools<i class="fa fa-plus"></i></a>
<div class="cxc-content">
<p>Lorem Ipsum 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, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</div>
</div>
<div class="cxc-title">
<a href="javascript:;" class="cxc-title-text">Roadmap<i class="fa fa-plus"></i></a>
<div class="cxc-content">
<p>Lorem Ipsum 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, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</div>
</div>
</div> 2. Create an Accordion Using Css
<style type="text/css">
.cxc_main{
position: relative;
max-width: 500px;
height: auto;
margin: 10px auto;
}
.cxc_main h2{
text-align: center;
color: #fff;
padding-bottom: 5px;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid #ddd;
}
.cxc-title{
position: relative;
width: 100%;
height: auto;
background-color: #576e51;
}
.cxc-title .cxc-title-text{
display: block;
padding: 10px 15px;
text-decoration: none;
color: #fff;
font-weight: 600;
border-bottom: 1px solid #ddd;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
transition:all 0.2s linear;
}
.cxc-title .cxc-title-text i{
float: right;
margin-top: 2px;
}
.cxc-title .cxc-title-text.active{
background-color: #ffbc66;
color: #000;
}
.cxc-content{
background-color: #fff;
border-bottom: 1px solid #ffbc66;
display:none;
}
.cxc-content p{
padding: 20px 15px;
margin: 0;
color: #000;
}
</style>3. Create Accordion Using JQuery
<script type="text/javascript">
jQuery(document).ready( function() {
jQuery(document).on('click', '.cxc-main .cxc-title .cxc-title-text', function() {
var cxc_accrodian = jQuery(this);
if( cxc_accrodian.hasClass('active') ) {
cxc_accrodian.removeClass('active');
cxc_accrodian.siblings('.cxc-content').slideUp(200);
jQuery('.cxc-title .cxc-title-text i').removeClass('fa-minus').addClass('fa-plus');
} else {
jQuery('.cxc-title .cxc-title-text i').removeClass('fa-minus').addClass('fa-plus');
cxc_accrodian.find('i').removeClass('fa-plus').addClass('fa-minus');
jQuery('.cxc-title .cxc-title-text').removeClass('active');
cxc_accrodian.addClass('active');
jQuery('.cxc-content').slideUp(200);
cxc_accrodian.siblings('.cxc-content').slideDown(200);
}
});
});
</script>FAQs:
What is an animated accordion?
An animated accordion is a user interface element that allows you to display collapsible content in a visually appealing and interactive manner. It typically consists of a list of sections that can be expanded or collapsed when clicked.
Which technologies are used to create an animated accordion?
An animated accordion can be created using HTML, CSS, and jQuery. HTML provides the structure, CSS handles the styling, and jQuery is used to add interactivity and animations.
How can I create multiple accordion sections?
To create multiple accordion sections, you can replicate the HTML structure for each section. Each section consists of a header and content block, which can be duplicated and customized as needed.
How do I style the accordion to match my website’s design?
You can customize the accordion’s appearance by modifying the CSS styles. Adjust colors, fonts, spacing, borders, and other visual properties to match your website’s design.
Is the animated accordion responsive for different devices?
The provided code doesn’t include specific responsive behavior. However, you can apply responsive design techniques by using CSS media queries to adjust the accordion’s layout and behavior based on different screen sizes.
Remember that these FAQs only cover the basics of making an animated accordion. Please feel free to investigate more customization possibilities depending on your individual needs and requirements.
-
CodexCoach is a skilled tech educator known for easy-to-follow tutorials in coding, digital design, and software development. With practical tips and interactive examples, CodexCoach helps people learn new tech skills and advance their careers.
