Skip to content

Commit 33cd3e4

Browse files
aayush105aayush105
authored
Merge pull request #754 from aayush105/add/accordion
feat: add accordion with html and css and organize accordion folder
2 parents 3e01d9d + c4fc4d4 commit 33cd3e4

File tree

7 files changed

+222
-0
lines changed

7 files changed

+222
-0
lines changed

Accordian_css_radio_rules/Screenshot (29).png renamed to Accordion Projects/Accordian_css_radio_rules/Screenshot (29).png

File renamed without changes.

Accordian_css_radio_rules/accordian.css renamed to Accordion Projects/Accordian_css_radio_rules/accordian.css

File renamed without changes.

Accordian_css_radio_rules/index.html renamed to Accordion Projects/Accordian_css_radio_rules/index.html

File renamed without changes.

‎Accordion Projects/AccordionV1/index.html‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
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>CSS Only Accordion</title>
7+
<meta
8+
name="description"
9+
content="A responsive accordion built using only HTML and CSS."
10+
/>
11+
<link rel="stylesheet" href="style.css" />
12+
<link rel="preconnect" href="https://fonts.googleapis.com" />
13+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
14+
<link
15+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
16+
rel="stylesheet"
17+
/>
18+
</head>
19+
<body>
20+
<main class="container">
21+
<h1 class="title">CSS Only Accordion</h1>
22+
<section class="accordion">
23+
<!-- Accordion Item 1 -->
24+
<input type="checkbox" id="item1" />
25+
<label class="accordion-header" for="item1">
26+
<span>What is an Accordion?</span>
27+
<span class="icon"></span>
28+
</label>
29+
<div class="accordion-content">
30+
<p>
31+
An accordion is a vertically stacked list of items that can be
32+
expanded to reveal content. This example is built entirely with HTML
33+
and CSS, no JavaScript.
34+
</p>
35+
</div>
36+
37+
<!-- Accordion Item 2 -->
38+
<input type="checkbox" id="item2" />
39+
<label class="accordion-header" for="item2">
40+
<span>How does it work without JavaScript?</span>
41+
<span class="icon"></span>
42+
</label>
43+
<div class="accordion-content">
44+
<p>
45+
By using hidden checkboxes with <code>:checked</code> pseudo-class
46+
and sibling selectors, we can toggle the visibility of content
47+
without a single line of JavaScript.
48+
</p>
49+
</div>
50+
51+
<!-- Accordion Item 3 -->
52+
<input type="checkbox" id="item3" />
53+
<label class="accordion-header" for="item3">
54+
<span>Is it responsive?</span>
55+
<span class="icon"></span>
56+
</label>
57+
<div class="accordion-content">
58+
<p>
59+
Yes! This accordion uses fluid units, flexible typography, and
60+
mobile-first design, so it looks good on any screen size.
61+
</p>
62+
</div>
63+
</section>
64+
65+
<!-- Footer credit -->
66+
<footer class="credit">
67+
<a
68+
href="https://github.com/aayush105"
69+
target="_blank"
70+
rel="noopener noreferrer"
71+
>
72+
<!-- GitHub SVG Icon -->By:
73+
<svg
74+
class="github-icon"
75+
xmlns="http://www.w3.org/2000/svg"
76+
width="22"
77+
height="22"
78+
viewBox="0 0 24 24"
79+
fill="currentColor"
80+
>
81+
<path
82+
d="M12 .5C5.65.5.5 5.65.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.3.8-.6v-2.2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.2-1.1-1.6-1.1-1.6-.9-.6.1-.6.1-.6 1 .1 1.6 1 1.6 1 .9 1.6 2.5 1.1 3.1.8.1-.6.3-1.1.6-1.4-2.6-.3-5.4-1.3-5.4-6 0-1.3.5-2.4 1.2-3.3-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.3 11.3 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.6.2 2.8.1 3.1.8.9 1.2 2 1.2 3.3 0 4.7-2.8 5.7-5.4 6 .3.2.6.8.6 1.7v2.5c0 .3.2.7.8.6 4.6-1.5 7.9-5.8 7.9-10.9C23.5 5.65 18.35.5 12 .5Z"
83+
/>
84+
</svg>
85+
<span class="author">AAYUSH SHRESTHA</span>
86+
</a>
87+
</footer>
88+
</main>
89+
</body>
90+
</html>

‎Accordion Projects/AccordionV1/style.css‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
/* General Styles */
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
body {
9+
font-family: "Inter", sans-serif;
10+
background: #f9fafb;
11+
color: #333;
12+
line-height: 1.6;
13+
padding: 2rem;
14+
}
15+
16+
.container {
17+
max-width: 700px;
18+
margin: auto;
19+
background: #fff;
20+
border-radius: 10px;
21+
padding: 2rem;
22+
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
23+
}
24+
25+
.title {
26+
text-align: center;
27+
font-size: 2rem;
28+
font-weight: 600;
29+
margin-bottom: 1.5rem;
30+
color: #111827;
31+
}
32+
33+
/* Accordion Styles */
34+
.accordion input[type="checkbox"] {
35+
display: none;
36+
}
37+
38+
.accordion-header {
39+
display: flex;
40+
justify-content: space-between;
41+
align-items: center;
42+
padding: 1rem;
43+
font-size: 1.1rem;
44+
font-weight: 600;
45+
cursor: pointer;
46+
border: 1px solid #d1d5db;
47+
border-radius: 8px;
48+
margin-bottom: 0.5rem;
49+
background: #f3f4f6;
50+
transition: background 0.3s ease;
51+
}
52+
53+
.accordion-header:hover {
54+
background: #e5e7eb;
55+
}
56+
57+
.icon::before {
58+
content: "+";
59+
font-size: 1.5rem;
60+
color: #2563eb; /* blue icon */
61+
transition: transform 0.3s ease, color 0.3s ease;
62+
}
63+
64+
/* Rotate icon when active */
65+
input[type="checkbox"]:checked + .accordion-header .icon::before {
66+
content: "–";
67+
color: #dc2626; /* red when open */
68+
}
69+
70+
/* Accordion Content */
71+
.accordion-content {
72+
max-height: 0;
73+
overflow: hidden;
74+
background: #f9fafb;
75+
border-left: 3px solid #2563eb;
76+
border-radius: 0 0 8px 8px;
77+
margin-bottom: 0.5rem;
78+
padding: 0 1rem;
79+
transition: max-height 0.4s ease, padding 0.4s ease;
80+
}
81+
82+
input[type="checkbox"]:checked + .accordion-header + .accordion-content {
83+
max-height: 200px;
84+
padding: 1rem;
85+
}
86+
87+
/* Footer credit */
88+
.credit {
89+
text-align: center;
90+
margin-top: 2rem;
91+
padding-top: 1rem;
92+
border-top: 1px solid #e5e7eb;
93+
}
94+
95+
.credit a {
96+
text-decoration: none;
97+
color: #111827;
98+
font-weight: 600;
99+
display: inline-flex;
100+
align-items: center;
101+
gap: 0.5rem;
102+
transition: color 0.3s ease;
103+
}
104+
105+
.credit a:hover {
106+
color: #2563eb;
107+
}
108+
109+
.github-icon {
110+
fill: currentColor;
111+
}
112+
113+
.author {
114+
font-size: 1rem;
115+
}
116+
117+
/* Responsive */
118+
@media (max-width: 600px) {
119+
.container {
120+
padding: 1.2rem;
121+
}
122+
.title {
123+
font-size: 1.6rem;
124+
}
125+
.accordion-header {
126+
font-size: 1rem;
127+
padding: 0.8rem;
128+
}
129+
.author {
130+
font-size: 0.95rem;
131+
}
132+
}

accordion/accordion-style.css renamed to Accordion Projects/accordion/accordion-style.css

File renamed without changes.

accordion/accordion.html renamed to Accordion Projects/accordion/accordion.html

File renamed without changes.

0 commit comments

Comments
 (0)