🤖 Cannot save fiddle #2385
Description
Error code
ERRW:1.0:EL1.0
Were you logged in?
Yes
Your username (if logged in)
No response
Your HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Unified e-Governance Portal</title>
<link rel="stylesheet" href="chinmay.css" />
<script src="chinmay .js" defer></script>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
rel="stylesheet"
/>
</head>
<body>
<header>
<h1>🇮🇳 Unified e-Governance Portal</h1>
<p>One Nation • One Platform • Digital India</p>
</header>
<div class="container">
<!-- Citizen Identity & Documentation -->
<div class="card">
<div class="card-header">
<i class="fa-solid fa-id-card"></i>
Citizen Identity & Documentation
<span>▼</span>
</div>
<div class="card-body">
<a href="https://uidai.gov.in" target="_blank">UIDAI – Aadhaar</a>
<a href="https://myaadhaar.uidai.gov.in" target="_blank">My Aadhaar</a>
<a href="https://appointments.uidai.gov.in" target="_blank">Aadhaar Appointment</a>
<a href="https://www.incometax.gov.in" target="_blank">Income Tax Department (PAN)</a>
<a href="https://www.onlineservices.nsdl.com/paam/endUserRegisterContact.html" target="_blank">PAN Card – NSDL</a>
<a href="https://www.nvsp.in" target="_blank">Voter ID – NVSP</a>
</div>
</div>
<!-- Finance, Tax & Revenue -->
<div class="card">
<div class="card-header">
<i class="fa-solid fa-indian-rupee-sign"></i>
Finance, Tax & Revenue
<span>▼</span>
</div>
<div class="card-body">
<a href="https://www.gst.gov.in" target="_blank">GST Portal</a>
<a href="https://www.epfindia.gov.in" target="_blank">EPFO</a>
<a href="https://www.npscra.nsdl.co.in" target="_blank">National Pension System (NPS)</a>
<a href="https://www.rbi.org.in" target="_blank">Reserve Bank of India (RBI)</a>
</div>
</div>
<!-- Health & Family Welfare -->
<div class="card">
<div class="card-header">
<i class="fa-solid fa-heart-pulse"></i>
Health & Family Welfare
<span>▼</span>
</div>
<div class="card-body">
<a href="https://abdm.gov.in" target="_blank">Ayushman Bharat Digital Mission</a>
<a href="https://www.cowin.gov.in" target="_blank">CoWIN Portal</a>
<a href="https://healthid.ndhm.gov.in" target="_blank">Health ID (NDHM)</a>
<a href="https://www.nhp.gov.in" target="_blank">National Health Portal</a>
</div>
</div>
<!-- Law, Justice & Public Safety -->
<div class="card">
<div class="card-header">
<i class="fa-solid fa-gavel"></i>
Law, Justice & Public Safety
<span>▼</span>
</div>
<div class="card-body">
<a href="https://services.ecourts.gov.in" target="_blank">eCourts Services</a>
<a href="https://www.legalserviceindia.com" target="_blank">Legal Services India</a>
<a href="https://mha.gov.in" target="_blank">Ministry of Home Affairs</a>
<a href="https://cybercrime.gov.in" target="_blank">Cyber Crime Reporting Portal</a>
</div>
</div>
<!-- Transport & Mobility -->
<div class="card">
<div class="card-header">
<i class="fa-solid fa-car"></i>
Transport & Mobility
<span>▼</span>
</div>
<div class="card-body">
<a href="https://parivahan.gov.in" target="_blank">Parivahan Sewa</a>
<a href="https://sarathi.parivahan.gov.in" target="_blank">Driving License Services</a>
<a href="https://echallan.parivahan.gov.in" target="_blank">e-Challan Portal</a>
<a href="https://morth.gov.in" target="_blank">Ministry of Road Transport & Highways</a>
</div>
</div>
<!-- Utilities & Infrastructure -->
<div class="card">
<div class="card-header">
<i class="fa-solid fa-building"></i>
Utilities & Infrastructure
<span>▼</span>
</div>
<div class="card-body">
<a href="https://www.cea.nic.in" target="_blank">Central Electricity Authority</a>
<a href="https://www.nefsc.org.in" target="_blank">National Energy Forum</a>
<a href="https://moud.gov.in" target="_blank">Ministry of Urban Development</a>
<a href="https://mowr.gov.in" target="_blank">Ministry of Water Resources</a>
</div>
</div>
<!-- Social Welfare & Inclusion -->
<div class="card">
<div class="card-header">
<i class="fa-solid fa-users"></i>
Social Welfare & Inclusion
<span>▼</span>
</div>
<div class="card-body">
<a href="https://wcd.nic.in" target="_blank">Women & Child Development Ministry</a>
<a href="https://tribal.nic.in" target="_blank">Ministry of Tribal Affairs</a>
<a href="https://socialjustice.gov.in" target="_blank">Social Justice & Empowerment</a>
<a href="https://rural.nic.in" target="_blank">Ministry of Rural Development</a>
</div>
</div>
<!-- Agriculture & Rural Development -->
<div class="card">
<div class="card-header">
<i class="fa-solid fa-tractor"></i>
Agriculture & Rural Development
<span>▼</span>
</div>
<div class="card-body">
<a href="https://agricoop.nic.in" target="_blank">Ministry of Agriculture & Farmers Welfare</a>
<a href="https://pmkisan.gov.in" target="_blank">PM-Kisan Portal</a>
<a href="https://nrega.nic.in" target="_blank">MGNREGA</a>
<a href="https://dmi.gov.in" target="_blank">India Meteorological Department</a>
</div>
</div>
<!-- Business, Startup & Employment -->
<div class="card">
<div class="card-header">
<i class="fa-solid fa-briefcase"></i>
Business, Startup & Employment
<span>▼</span>
</div>
<div class="card-body">
<a href="https://www.startupindia.gov.in" target="_blank">Startup India</a>
<a href="https://www.mca.gov.in" target="_blank">Ministry of Corporate Affairs</a>
<a href="https://www.ncs.gov.in" target="_blank">National Career Service</a>
<a href="https://www.sbi.co.in" target="_blank">State Bank of India</a>
</div>
</div>
</div>
</body>
</html>Your JavaScript
const headers = document.querySelectorAll(".card-header");
headers.forEach((header) => {
header.addEventListener("click", () => {
const body = header.nextElementSibling;
// close others
document.querySelectorAll(".card-body").forEach((b) => {
if (b !== body) b.style.maxHeight = null;
});
// toggle current
if (body.style.maxHeight) {
body.style.maxHeight = null;
} else {
body.style.maxHeight = body.scrollHeight + "px";
}
});
});Your CSS
body {
margin: 0;
font-family: "Segoe UI", sans-serif;
background: linear-gradient(135deg, #eef2f7, #dfe9f3);
}
/* Header */
header {
text-align: center;
padding: 25px;
background: linear-gradient(90deg, #ff9933, #ffffff, #138808);
color: #002366;
}
header h1 {
margin: 0;
}
/* Container */
.container {
max-width: 900px;
margin: 20px auto;
padding: 10px;
}
/* Card */
.card {
background: white;
border-radius: 14px;
margin-bottom: 15px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
/* Header */
.card-header {
padding: 16px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
color: #002366;
}
.card-header i {
margin-right: 10px;
}
/* Body */
.card-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
background: #fafafa;
}
/* Links */
.card-body a {
display: block;
padding: 12px 18px;
text-decoration: none;
color: #0a7d2c;
border-top: 1px solid #eee;
transition: 0.2s;
}
.card-body a:hover {
background: #e6f4ea;
}