In this topic,
We are going to see how to create a custom accordion using jQuery.
Step-1: include the jQuery link in the <head>..</head>tag on index.html file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Step-2: Create Html Code in the index.html file.
I have used font awesome for icons.
<body>
<div class="main-section">
<div class="container">
<h1 class="text">Accrdeon</h1>
<div class="acordeon">
<div class="acordeon-cabecera">
<i class="fas fa-sort-up iconup"></i><i class="fas fa-caret-right iconright"></i> Since purchasing a policy, I have had to change the date of the camp my organization is hosting. Does the date on my policy have to be changed?</div>
<div class="acordeon-contenido">
<p class="text">Yes. Please contact us a <a href="mailto:info@sportsaver.com">info@sportsaver.com</a> for assistance. The insurance carrier will need written confirmation from your certificate holders that says they understand you’ve moved the date of your camp to the new date.</p>
</div>
<hr>
<div class="acordeon-cabecera"><i class="fas fa-sort-up iconup"></i><i class="fas fa-caret-right iconright"></i> When will my policy go into effect?</div>
<div class="acordeon-contenido">
<p class="text">Your policy is effective as of 12:01 AM on the first day of coverage that you requested on your application and will expire on the last day of coverage as you applied for.</p>
</div>
<hr>
<div class="acordeon-cabecera"><i class="fas fa-sort-up iconup"></i><i class="fas fa-caret-right iconright"></i> The ice arena I am hosting my hockey camp at needs proof of insurance coverage. I purchased a CampSaver policy. When will I receive my policy certificate?</div>
<div class="acordeon-contenido">
<p class="text">Yes. Please contact us a <a href="mailto:info@sportsaver.com">Toggle Content</a></p>
</div>
<hr>
<div class="acordeon-cabecera"><i class="fas fa-sort-up iconup"></i><i class="fas fa-caret-right iconright"></i> One of my camp volunteers got injured while working at the camp. Do they file a claim on the policy or do I?</div>
<div class="acordeon-contenido">
<p class="text">The Named Insured is usually the name of the entity shown on the permit or field/facility rental agreement between you/ your organization and the venue. For quick reference, the named insured can be found on the Declarations Page of your policy, and in the Named Insured box on your certificate of insurance.</p>
</div>
<hr>
<div class="acordeon-cabecera"><i class="fas fa-sort-up iconup"></i><i class="fas fa-caret-right iconright"></i> I own a volleyball club and we are hosting a summer-break beach volleyball camp. I didn’t know the state beach we reserved courts at require we carry liability coverage. The camp is only four days away. Is it too late to get coverage?</div>
<div class="acordeon-contenido">
<p class="text">It is not too late to apply for coverage! You can apply for coverage up to the day before the start of your camp</p>
</div>
<hr>
<div class="acordeon-cabecera"><i class="fas fa-sort-up iconup"></i><i class="fas fa-caret-right iconright"></i> I took out a policy for a showcase the soccer club I own put on. One of the volunteers working for me accidentally backed a truck into a building on the premises (which I do not own), resulting in a significant amount of damage to the structure. I think I need to file a claim. What steps do I need to take?</div>
<div class="acordeon-contenido">
<p class="text"><span class="s4">Please </span><span class="s4">report all incidents to </span><a href="mailto:newlossescl@acm.com"><span class="s9">newlossescl@acm</span><span class="s9">claims</span><span class="s9"> </span><span class="s9">.com</span></a><span class="s4">. Please include your policy number, certificate of insurance and any other relevant policy information. Please be advised that a</span><span class="s7">utomobile losses are excluded under theses General Liability policies.</span></p>
</div>
</div>
</div>
</div>
</body>
Step-3: Add CSS in<style>….</style> tag on index.html file.
.container:after{
content:"";
display:block;
clear:both;
}
body .container{
width:100%;
max-width:1200px;
padding-left:15px;
padding-right:15px;
margin:0 auto;
position:relative;
float:none;
}
body .container .container{
width:100%;
max-width:100%;
padding-left:0;
padding-right:0;
}
.acordeon {
background: white;
}
.acordeon-cabecera {
font-weight: 600;
padding: 1.5rem;
position: relative;
padding-left: 30px;
}
.acordeon-contenido {
display: none;
background: #fff;
padding: 1.4rem;
color: #4a5666;
}
.iconup{
display: none;
}
.iconright {
position: absolute;
transform: translateY(-50%);
left: 0px;
padding-top: 3px;
transform: rotate(0deg);
}
Step-4: Add jQuery code in <script>…</script> tag on index.html.
I have toggled the Active class on click and toggled the slide.
The icon is rotated when the class is active.
<script type="text/javascript">
$(document).ready(function(){
$(".acordeon").on("click", ".acordeon-cabecera", function() {
$(this).toggleClass("active").next().slideToggle();
if($(this).hasClass('active'))
{
$(this).find('.iconright').css({'transform':' rotate(270deg)'});
$(this).css("color", "rgb(247, 165, 42)");
}
else{
$(this).find('.iconright').css({'transform':' rotate(0deg)'});
$(this).css("color", "rgb(0, 0, 0)");
}
});
});
</script>
Review the below video.
I hope you guys found something useful ??
