Project 12: Advance Accordion

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 :





.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;



.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;



padding: 0px !important;





<div class=”main”>

<div class=”third” >

<input type=”number” value=”1″ class=”no” name=”name”>

<button class=”btn”>Add</button><br>


<div class=”second”>


<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”>



<script src=””>



$(document).ready(function () {

$(“.btn”).click(function () {



$(“.btn”).click(function () {

var t = jQuery(“.no”).val();



// 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>”);



// console.log(a);


// $(“.btn”).click(function(){

//     $(“.first”).hide();

// })

// Remove Div

$(‘.main’).on(‘click’, ‘.remove’, function () {

var b=jQuery(“.no”).val();




// console.log(b);



//     $(“.m”).empty();


var d=jQuery(“.no”).val();



$(“.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>”);












PHP Projects

School Projects

Collage Projects

Join Us

Follow Us

Recent Blogs