From c7003f67a797edf04e36d8861aeefa03ced6bf23 Mon Sep 17 00:00:00 2001
From: Kavana M A <153212099+kavana185@users.noreply.github.com>
Date: Fri, 17 Oct 2025 19:44:26 +0530
Subject: [PATCH] Add files via upload

---
 css-accordion/README.md | 24 +++++++++++++++++++
 css-accordion/idex.html | 31 ++++++++++++++++++++++++
 css-accordion/style.css | 53 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 108 insertions(+)
 create mode 100644 css-accordion/README.md
 create mode 100644 css-accordion/idex.html
 create mode 100644 css-accordion/style.css
diff --git a/css-accordion/README.md b/css-accordion/README.md
new file mode 100644
index 00000000..48a85ee2
--- /dev/null
+++ b/css-accordion/README.md
@@ -0,0 +1,24 @@
+# CSS-Only Accordion
+
+A fully functional accordion (collapsible sections) built with only HTML and CSS.  
+No JavaScript required.
+
+## Features
+- Expand/collapse multiple sections
+- Smooth transitions
+- Only one section open at a time (radio button version)
+- Responsive design
+- Customizable colors and styles
+- Accessible (keyboard-friendly)
+- Rotating arrow icon for open sections
+
+## How to Use
+1. Open `index.html` in any modern browser.
+2. Click on section headers to expand or collapse content.
+
+## Folder Structure
+
+css-accordion/
+- index.html
+- style.css
+- README.md
\ No newline at end of file
diff --git a/css-accordion/idex.html b/css-accordion/idex.html
new file mode 100644
index 00000000..2778d9b7
--- /dev/null
+++ b/css-accordion/idex.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS-Only Accordion</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <h1>CSS-Only Accordion</h1>
+
+  <div class="accordion">
+    <input type="radio" name="accordion" id="section1">
+    <label for="section1">Section 1 <span class="arrow">▼</span></label>
+    <div class="content">
+      <p>Content for section 1. Add as much text as you like here.</p>
+    </div>
+
+    <input type="radio" name="accordion" id="section2">
+    <label for="section2">Section 2 <span class="arrow">▼</span></label>
+    <div class="content">
+      <p>Content for section 2.</p>
+    </div>
+
+    <input type="radio" name="accordion" id="section3">
+    <label for="section3">Section 3 <span class="arrow">▼</span></label>
+    <div class="content">
+      <p>Content for section 3.</p>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/css-accordion/style.css b/css-accordion/style.css
new file mode 100644
index 00000000..5ed2c240
--- /dev/null
+++ b/css-accordion/style.css
@@ -0,0 +1,53 @@
+body {
+  font-family: sans-serif;
+  padding: 2rem;
+  background: #f0f0f0;
+}
+
+.accordion {
+  max-width: 500px;
+  margin: auto;
+}
+
+.accordion input[type="radio"] {
+  display: none;
+}
+
+.accordion label {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #3498db;
+  color: white;
+  padding: 1rem;
+  margin-top: 0.5rem;
+  cursor: pointer;
+  border-radius: 5px;
+  transition: background 0.3s;
+}
+
+.accordion label:hover {
+  background: #2980b9;
+}
+
+.accordion .content {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease, padding 0.3s ease;
+  background: #ecf0f1;
+  padding: 0 1rem;
+  border-radius: 0 0 5px 5px;
+}
+
+.accordion input[type="radio"]:checked + label + .content {
+  max-height: 200px;
+  padding: 1rem;
+}
+
+.arrow {
+  transition: transform 0.3s;
+}
+
+.accordion input[type="radio"]:checked + label .arrow {
+  transform: rotate(180deg);
+}
