<!-- Paste this into Blogger (HTML view). Wrapper class: Durgesh -->
<style>
/* Durgesh Accordion Styles - paste into your post or template <head> */
.Durgesh {
font-family: "Helvetica Neue", Arial, sans-serif;
max-width: 720px;
margin: 18px auto;
color: #111;
padding: 12px;
}
/* Section title like "Complete Pack Single Zip File" */
.Durgesh .section-title {
font-weight: 800;
font-size: 22px;
text-align: center;
margin: 6px 0 14px;
letter-spacing: -0.6px;
}
/* Accordion item wrapper */
.Durgesh .acc-item {
border: 2px solid #cfcfcf;
border-radius: 4px;
margin: 10px 0;
overflow: hidden;
background: #fff;
}
/* Header row */
.Durgesh .acc-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
cursor: pointer;
user-select: none;
font-weight: 600;
font-size: 15px;
}
/* Left label (arrow symbol and text) */
.Durgesh .acc-head .label {
display: flex;
align-items: center;
gap: 10px;
}
/* small arrow glyph at left */
.Durgesh .acc-head .label::before {
content: "⇒";
font-weight: 700;
color: #444;
}
/* plus/minus icon */
.Durgesh .acc-head .toggle-icon {
width: 28px;
height: 28px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #333;
background: transparent;
border: none;
}
/* ✅ Center the button */
.Durgesh .acc-body {
padding: 18px;
border-top: 1px solid #e9e9e9;
display: none;
background: #fbfbfb;
text-align: center; /* <--- Added this */
}
.Durgesh .download-btn {
display: inline-block; /* ensures it centers properly */
padding: 12px 26px;
border-radius: 6px;
text-decoration: none;
font-weight: 700;
font-size: 15px;
color: #fff;
background: linear-gradient(180deg,#7b28d9,#6b20c9);
box-shadow: 0 6px 18px rgba(123,40,217,0.18);
transition: transform .12s ease, box-shadow .12s ease;
}
box-shadow: 0 6px 18px rgba(123,40,217,0.18);
transition: transform .12s ease, box-shadow .12s ease;
}
.Durgesh .download-btn:active { transform: translateY(1px); }
.Durgesh .download-btn:focus { outline: 2px solid rgba(107,32,201,.14); outline-offset: 2px; }
/* When item is open */
.Durgesh .acc-item.open .acc-body { display: block; }
.Durgesh .acc-item.open .toggle-icon { font-weight: 900; }
/* Minimal responsive tweaks */
@media (max-width:480px){
.Durgesh { padding: 8px; }
.Durgesh .section-title { font-size: 20px; }
.Durgesh .acc-head { padding: 12px; font-size: 14px; }
.Durgesh .acc-body { padding: 14px; }
.Durgesh .download-btn { padding: 10px 20px; font-size: 14px; }
}
</style>
<div class="Durgesh" aria-label="Durgesh Accordion">
<div class="section-title">|| Complete Pack Single Zip File ||</div>
<!-- Accordion item (you can duplicate this block) -->
<div class="acc-item" data-size="1.26 GB">
<div class="acc-head" role="button" tabindex="0" aria-expanded="false">
<div class="label">480p SD Complete Pack (1.26 GB)</div>
<div class="toggle-icon" aria-hidden="true">+</div>
</div>
<div class="acc-body">
<a class="download-btn" href="#" role="link" aria-label="Download 480p pack">Download Now</a>
</div>
</div>
<!-- Another item -->
<div class="acc-item" data-size="2.25 GB">
<div class="acc-head" role="button" tabindex="0" aria-expanded="false">
<div class="label">720p HD Complete Pack (2.25 GB)</div>
<div class="toggle-icon" aria-hidden="true">+</div>
</div>
<div class="acc-body">
<a class="download-btn" href="#" role="link" aria-label="Download 720p pack">Download Now</a>
</div>
</div>
<!-- Another item -->
<div class="acc-item" data-size="2.25 GB">
<div class="acc-head" role="button" tabindex="0" aria-expanded="false">
<div class="label">1080p HD Complete Pack (9.25 GB)</div>
<div class="toggle-icon" aria-hidden="true">+</div>
</div>
<div class="acc-body">
<a class="download-btn" href="#" role="link" aria-label="Download 720p pack">Download Now</a>
</div>
</div>
<script>
/* Durgesh Accordion JS - place after markup (Blogger: add inside the post HTML) */
(function(){
function toggleItem(item){
var head = item.querySelector('.acc-head');
var body = item.querySelector('.acc-body');
var icon = head.querySelector('.toggle-icon');
var isOpen = item.classList.contains('open');
if(isOpen){
item.classList.remove('open');
head.setAttribute('aria-expanded','false');
icon.textContent = '+';
body.style.display = 'none';
} else {
item.classList.add('open');
head.setAttribute('aria-expanded','true');
icon.textContent = '−'; // minus
body.style.display = 'block';
}
}
// Initialize events
document.querySelectorAll('.Durgesh .acc-item').forEach(function(item){
var head = item.querySelector('.acc-head');
head.addEventListener('click', function(){
toggleItem(item);
});
head.addEventListener('keydown', function(e){
if(e.key === 'Enter' || e.key === ' '){
e.preventDefault();
toggleItem(item);
}
});
});
})();
</script>
