Accordian

Developer
Tushar Bandal
Size
2,326 Kb
Views
8,096
  1. Accordian Previews
  2. Accordian HTML Codes
  3. Accordian CSS Codes
  4. Accordian JS Codes

How do I make an accordian?

What is a accordian? How do you make a accordian? This script and codes were developed by Tushar Bandal on 19 December 2022, Monday.

Accordian Previews
IQ Test

Accordian - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Accordian</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="accordCnt opened"> <div class="accordHead clearfix"> <h3>Lorem Ipsum</h3> <span class="tabBtn"></span> </div> <div class="accordBody"> <ul> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Vestibulum auctor dapibus neque.</li> </ul> </div>
</div>
<div class="accordCnt"> <div class="accordHead clearfix"> <h3>Lorem Ipsum 2</h3> <span class="tabBtn"></span> </div> <div class="accordBody"> <ul> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Vestibulum auctor dapibus neque.</li> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Vestibulum auctor dapibus neque.</li> </ul> </div>
</div>
<div class="accordCnt"> <div class="accordHead clearfix"> <h3>Lorem Ipsum 2</h3> <span class="tabBtn"></span> </div> <div class="accordBody"> <ul> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Vestibulum auctor dapibus neque.</li> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Vestibulum auctor dapibus neque.</li> </ul> </div>
</div>
<div class="accordCnt"> <div class="accordHead clearfix"> <h3>Lorem Ipsum 2</h3> <span class="tabBtn"></span> </div> <div class="accordBody"> <ul> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Vestibulum auctor dapibus neque.</li> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Vestibulum auctor dapibus neque.</li> </ul> </div>
</div>
<div class="accordCnt"> <div class="accordHead clearfix"> <h3>Lorem Ipsum 2</h3> <span class="tabBtn"></span> </div> <div class="accordBody"> <ul> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Vestibulum auctor dapibus neque.</li> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Vestibulum auctor dapibus neque.</li> </ul> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Accordian - Script Codes CSS Codes

.accordCnt { border: 1px solid #e5e5e5; margin-bottom: 15px; font-size: 15px;
}
.accordHead { padding: 10px 17px 10px 10px; cursor: pointer
}
.accordHead .tabBtn { float: right; padding-top: 3px; margin: 0
}
.accordHead .tabBtn:after,
.accordHead .tabBtn:before { height: 1px; width: 9px;
}
.accordHead .tabBtn:after { width: 1px; height: 9px; margin-left: 4px; margin-top: -5px;
}
.opened .accordHead .tabBtn:after { height: 0; margin-top: -1px;
}
.opened .accordHead h3 { color: #666;
}
.accordCnt.opened { background: #f5f5f5
}
.accordCnt ul li { padding-bottom: 8px;
}
.accordCnt ul li:last-child { padding: 0
}
.accordHead h3 { float: left; margin: 0; color: #285fac; font-size: 18px; padding-left: 18px; line-height: 24px;
}
.tabBtn { height: 16px; width: 16px; margin-top: 10px; margin-right: 13px;
}
.tabBtn:after,
.tabBtn:before { height: 2px; width: 16px; background: #ed4324; content: " "; display: block; margin-top: 9px;
}
.tabBtn:after { width: 2px; height: 16px; margin-top: -9px; margin-left: 7px; transition: all 0.5s;
}
.opened .tabBtn:after{ height: 0; margin-top: -1px
}
.accordBody { padding: 0 10px; display: none;
}
body { padding: 20px
}

Accordian - Script Codes JS Codes

$('.opened').children('.accordBody').show(); $('.accordHead ').click(function(){ if(!$(this).parent('.accordCnt').hasClass('opened')) { $('.accordCnt').removeClass('opened'); $('.accordBody').slideUp(); $(this).parent('.accordCnt').addClass('opened'); $(this).next('.accordBody').slideDown(); } })
Accordian - Script Codes
Accordian - Script Codes
Home Page Home
Developer Tushar Bandal
Username tusharbandal
Uploaded December 19, 2022
Rating 3
Size 2,326 Kb
Views 8,096
Do you need developer help for Accordian?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tushar Bandal (tusharbandal) Script Codes
Name
Custom Select Box
A Pen by tushar bandal
Drag and drop
Theme setting
Tic Tac Toe game
Simple Angular Tabs
CSS3 Form
CSS3 Gallery
Angular Accordion
Sticky footer
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!