Craft Advanced Accordions with jQuery (Under 150 words)
Vanilla jQuery accordions can be basic. Here’s a glimpse of building advanced ones:
- Multiple Expandable Panels: Allow users to open multiple panels simultaneously.
- Nested Accordions: Create nested accordion structures for complex content organization.
- Animations & Callbacks: Enhance user experience with smooth animations (slide, fade) when opening/closing panels. Execute code (callbacks) when specific panels are activated/deactivated.
- Customizable Icons: Replace default icons with custom images or text for better visual appeal.
- Keyboard Navigation: Enable keyboard accessibility for users to navigate panels using arrow keys.
These features require advanced jQuery techniques or additional libraries like jQuery UI for built-in functionalities.
Here’s an example of this :
Code
<html>
<head>
<style>
.main {
background-color: #41c4f9;
background: linear-gradient(184.43deg, #41c4f9 -18.16%, #0871c9 232.14%);
padding: 40px 10px;
margin: 0px 380px;
border-radius: 10px;
}
.remove {
border: 1px solid red;
border-radius: 100%;
background-color: red;
color: white;
font-size: 14px;
padding: 7px 13px;
}
.first,
.col {
padding: 20px 5px 0px 5px;
text-align: left;
border: 2px solid white;
margin-top: 40px;
}
.btn {
border-radius: 10px;
padding: 7px 30px;
background-color: white;
color: red;
border: 1px solid red;
font-size: 20px;
/* margin: 0px 0px 40px 626px; */
}
.btn:hover {
background-color: red;
color: white;
border: 1px solid red;
}
#row {
width: 49% !important;
}
button {
cursor: pointer;
}
.name {
margin-top: .5%;
width: 50%;
max-width: 100%;
background: rgba(255, 255, 255, 0.2);
border-radius: 15px;
border: 0;
color: #FFF;
padding: 10px 20px;
font-size: 18px;
text-align: left;
box-sizing: border-box;
margin-bottom: 20px;
border: 1px solid;
border-color: #55bff1;
}
.third {
display: flex;
justify-content: flex-end;
gap: 20px;
}
.no {
width: 15%;
border-radius: 50px;
font-size: 20px;
text-align: center;
border-color: white;
}
.head, .foot,.f {
font-size: 130%;
font-variant: normal;
font-weight: 600;
margin: 0;
padding: 0px 9px;
visibility: visible;
color: #FFF;
}
.foot{
padding: 0px !important;
}
</style>
</head>
<body>
<div class=”main”>
<div class=”third” >
<input type=”number” value=”1″ class=”no” name=”name”>
<button class=”btn”>Add</button><br>
</div>
<div class=”second”>
</div>
<div class=”first”>
<div class=”my”>
<label class=”foot”>1</label></div>
<label class=”head”>Text</label>
<input type=”text” id=”row” class=”name”><button class=remove>-</button><br>
<label class=”head”>Link</label>
<input type=”link” id=”row” class=”name”>
</div>
</div>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js”>
</script>
<script>
$(document).ready(function () {
$(“.btn”).click(function () {
$(“.foot”).empty();
});
$(“.btn”).click(function () {
var t = jQuery(“.no”).val();
t++;
$(“.foot”).append(t);
// console.log(t);
});
// Add Div
$(“.btn”).click(function () {
var a = jQuery(“.no”).val();
$(“.second:last”).append(“<div class=col><div class=m><label class=f>”+a+”</label></div><label class=head> Text</label><input type=text class=name><button class=remove>-</button><br><label class=head>Link</label><input type=text class=name><br></div>”);
a++;
jQuery(“.no”).val(a);
// console.log(a);
});
// $(“.btn”).click(function(){
// $(“.first”).hide();
// })
// Remove Div
$(‘.main’).on(‘click’, ‘.remove’, function () {
var b=jQuery(“.no”).val();
$(this).parent().remove();
b–;
jQuery(“.no”).val(b);
// console.log(b);
});
$(“.main”).on(‘click’,’.remove’,function(){
// $(“.m”).empty();
$(“.col”).remove();
var d=jQuery(“.no”).val();
for(x=1;x<=d;x++){
console.log(x);
$(“.second:last”).append(“<div class=col><div class=m><label class=f>”+x+”</label></div><label class=head> Text</label><input type=text class=name><button class=remove>-</button><br><label class=head>Link</label><input type=text class=name><br></div>”);
}
});
});
</script>
</body>
</html>
Output
