Accordion

Developer
Sudipta Das
Size
1,843 Kb
Views
2,024
  1. Accordion Previews
  2. Accordion HTML Codes
  3. Accordion CSS Codes
  4. Accordion JS Codes

How do I make an accordion?

What is a accordion? How do you make a accordion? This script and codes were developed by Sudipta Das on 21 January 2023, Saturday.

Accordion Previews
IQ Test

Accordion - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Accordion</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h4 class="bg-info">Section 1</h4>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<h4 class="bg-info">Section 2</h4>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<h4 class="bg-info">Section 3</h4>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Accordion - Script Codes CSS Codes

h4,div{ padding:8px;
}
h4{ cursor:pointer;
}
div{ display:none;
}
div:nth-child(2){ display:block
}

Accordion - Script Codes JS Codes

$('h4').click(function(){ $(this).next().slideToggle();
});
Accordion - Script Codes
Accordion - Script Codes
Home Page Home
Developer Sudipta Das
Username sdas13
Uploaded January 21, 2023
Rating 3
Size 1,843 Kb
Views 2,024
Do you need developer help for Accordion?

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!

Sudipta Das (sdas13) Script Codes
Name
Wiki Viewer 1
Local Weather
Random Quotes
CSS popup
Sorting Algorithms
IMDB api
OOJS
PortFolio
Javascript DOM
Hightcharts
Create amazing art & images 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!