Drop down — Bootstrap accordions snippet

Accordions Bootstrap 5Free+ CSS+ JS

Add a accordion to your UI with Drop down — Bootstrap accordions snippet. Free Bootstrap 5 code — HTML, CSS & JS ready to copy, MIT licensed.

1.5k views9 downloadslast year

gosnippets.com/preview/drop-down-—-bootstrap-accordions-snippet

Source Code

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Tools Interface</title>
7    <link rel="stylesheet" href="styles.css">
8</head>
9<body>
10    <div class="container" id="tools-container">
11        <div class="tool" onclick="toggleDropdown('stock-images-dropdown')">
12            <span>STOCK IMAGES</span>
13            <div class="dropdown" id="stock-images-dropdown">
14                <!-- Categories will be dynamically inserted here -->
15            </div>
16        </div>
17        <div class="tool" onclick="toggleDropdown('video-packs-dropdown')">
18            <span>VIDEO PACKS</span>
19            <div class="dropdown" id="video-packs-dropdown">
20                <!-- Categories will be dynamically inserted here -->
21            </div>
22        </div>
23        <div class="tool" onclick="toggleDropdown('sound-effects-dropdown')">
24            <span>SOUND EFFECTS</span>
25            <div class="dropdown" id="sound-effects-dropdown">
26                <!-- Categories will be dynamically inserted here -->
27            </div>
28        </div>
29        <div class="tool" onclick="toggleDropdown('theme-songs-dropdown')">
30            <span>THEME SONGS</span>
31            <div class="dropdown" id="theme-songs-dropdown">
32                <!-- Categories will be dynamically inserted here -->
33            </div>
34        </div>
35        <div class="tool" onclick="toggleDropdown('free-beats-dropdown')">
36            <span>FREE BEATS</span>
37            <div class="dropdown" id="free-beats-dropdown">
38                <!-- Categories will be dynamically inserted here -->
39            </div>
40        </div>
41    </div>
42    <script src="script.js"></script>
43</body>
44</html>

More Accordions snippets

Bootstrap 5 accordion with chevron up and down

Free Bootstrap 5 accordion snippet — Bootstrap 5 accordion with chevron up and down. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.

AccordionsView →

Bootstrap 5 accordion dropdown menu snippets

Bootstrap 5 accordion dropdown menu snippets: a hand-crafted, open-source Bootstrap 5 accordion. HTML, CSS & JS included, ready to copy.

AccordionsView →

Cool image accordion with pure CSS

Add a accordion to your UI with Cool image accordion with pure CSS. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.

AccordionsView →

Comments(0)

No comments yet — be the first to start the discussion.

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Tools Interface</title> 7 <link rel="stylesheet" href="styles.css"> 8</head> 9<body> 10 <div class="container" id="tools-container"> 11 <div class="tool" onclick="toggleDropdown('stock-images-dropdown')"> 12 <span>STOCK IMAGES</span> 13 <div class="dropdown" id="stock-images-dropdown"> 14  15 </div> 16 </div> 17 <div class="tool" onclick="toggleDropdown('video-packs-dropdown')"> 18 <span>VIDEO PACKS</span> 19 <div class="dropdown" id="video-packs-dropdown"> 20  21 </div> 22 </div> 23 <div class="tool" onclick="toggleDropdown('sound-effects-dropdown')"> 24 <span>SOUND EFFECTS</span> 25 <div class="dropdown" id="sound-effects-dropdown"> 26  27 </div> 28 </div> 29 <div class="tool" onclick="toggleDropdown('theme-songs-dropdown')"> 30 <span>THEME SONGS</span> 31 <div class="dropdown" id="theme-songs-dropdown"> 32  33 </div> 34 </div> 35 <div class="tool" onclick="toggleDropdown('free-beats-dropdown')"> 36 <span>FREE BEATS</span> 37 <div class="dropdown" id="free-beats-dropdown"> 38  39 </div> 40 </div> 41 </div> 42 <script src="script.js"></script> 43</body> 44</html>