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 :

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

 

 

Search

PHP Projects

School Projects

Collage Projects

Join Us

Follow Us

Recent Blogs