css accordion with radio buttons conflicts on checked
0
I try to build an accordion with css using radio buttons, which has a css conflict on checked button because the none checked will not collapse back to initial state. What do I wrong with my css?
here is my codepen
.accordeon {
display: flex;
flex-direction: column;
}
.accordeon .accordeon__item input {
display: none;
}
.accordeon .accordeon__item input:checked ~ .content {
opacity: 1;
font-size: 14px;
transition: font-size 300ms 0ms ease-in, opacity 300ms 300ms ease-in;
}
.accordeon .accordeon__item label {
font-weight: bold;
text-transform: uppercase;
font-size: 16px;
padding: .5em 1em;
cursor: pointer;
}
.accordeon .accordeon__item .content {
font-size: 0;
line-height: 1.25;
padding: 1rem;
opacity: 0;
transition: font-size 300ms 300ms ease-in, opacity 300ms 0ms ease-in;
} <div class="accordeon">
<div class="accordeon__item">
<input type="radio" name="" id="acc-1">
<label for="acc-1">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-2">
<label for="acc-2">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-3">
<label for="acc-3">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-4">
<label for="acc-4">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-5">
<label for="acc-5">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-6">
<label for="acc-6">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-7">
<label for="acc-7">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-8">
<label for="acc-8">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
</div>
</div>css radio-button accordion
asked Dec 28 '18 at 12:53
fefefefe
3,0591562115
add a comment |
0
I try to build an accordion with css using radio buttons, which has a css conflict on checked button because the none checked will not collapse back to initial state. What do I wrong with my css?
here is my codepen
.accordeon {
display: flex;
flex-direction: column;
}
.accordeon .accordeon__item input {
display: none;
}
.accordeon .accordeon__item input:checked ~ .content {
opacity: 1;
font-size: 14px;
transition: font-size 300ms 0ms ease-in, opacity 300ms 300ms ease-in;
}
.accordeon .accordeon__item label {
font-weight: bold;
text-transform: uppercase;
font-size: 16px;
padding: .5em 1em;
cursor: pointer;
}
.accordeon .accordeon__item .content {
font-size: 0;
line-height: 1.25;
padding: 1rem;
opacity: 0;
transition: font-size 300ms 300ms ease-in, opacity 300ms 0ms ease-in;
} <div class="accordeon">
<div class="accordeon__item">
<input type="radio" name="" id="acc-1">
<label for="acc-1">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-2">
<label for="acc-2">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-3">
<label for="acc-3">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-4">
<label for="acc-4">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-5">
<label for="acc-5">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-6">
<label for="acc-6">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-7">
<label for="acc-7">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-8">
<label for="acc-8">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
</div>
</div>css radio-button accordion
asked Dec 28 '18 at 12:53
fefefefe
3,0591562115
1
You needed to add the same name your radio boxes example: <input type="radio" name="toggle" id="acc-1"> <input type="radio" name="toggle" id="acc-2">
– Md. Abu Sayed
Dec 28 '18 at 12:58
Oh thanks a lot, I forgot about this aspect. thanks again
– fefe
Dec 28 '18 at 13:00
add a comment |
0
0
0
I try to build an accordion with css using radio buttons, which has a css conflict on checked button because the none checked will not collapse back to initial state. What do I wrong with my css?
here is my codepen
.accordeon {
display: flex;
flex-direction: column;
}
.accordeon .accordeon__item input {
display: none;
}
.accordeon .accordeon__item input:checked ~ .content {
opacity: 1;
font-size: 14px;
transition: font-size 300ms 0ms ease-in, opacity 300ms 300ms ease-in;
}
.accordeon .accordeon__item label {
font-weight: bold;
text-transform: uppercase;
font-size: 16px;
padding: .5em 1em;
cursor: pointer;
}
.accordeon .accordeon__item .content {
font-size: 0;
line-height: 1.25;
padding: 1rem;
opacity: 0;
transition: font-size 300ms 300ms ease-in, opacity 300ms 0ms ease-in;
} <div class="accordeon">
<div class="accordeon__item">
<input type="radio" name="" id="acc-1">
<label for="acc-1">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-2">
<label for="acc-2">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-3">
<label for="acc-3">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-4">
<label for="acc-4">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-5">
<label for="acc-5">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-6">
<label for="acc-6">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-7">
<label for="acc-7">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-8">
<label for="acc-8">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
</div>
</div>css radio-button accordion
asked Dec 28 '18 at 12:53
fefefefe
3,0591562115
I try to build an accordion with css using radio buttons, which has a css conflict on checked button because the none checked will not collapse back to initial state. What do I wrong with my css?
here is my codepen
.accordeon {
display: flex;
flex-direction: column;
}
.accordeon .accordeon__item input {
display: none;
}
.accordeon .accordeon__item input:checked ~ .content {
opacity: 1;
font-size: 14px;
transition: font-size 300ms 0ms ease-in, opacity 300ms 300ms ease-in;
}
.accordeon .accordeon__item label {
font-weight: bold;
text-transform: uppercase;
font-size: 16px;
padding: .5em 1em;
cursor: pointer;
}
.accordeon .accordeon__item .content {
font-size: 0;
line-height: 1.25;
padding: 1rem;
opacity: 0;
transition: font-size 300ms 300ms ease-in, opacity 300ms 0ms ease-in;
} <div class="accordeon">
<div class="accordeon__item">
<input type="radio" name="" id="acc-1">
<label for="acc-1">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-2">
<label for="acc-2">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-3">
<label for="acc-3">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-4">
<label for="acc-4">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-5">
<label for="acc-5">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-6">
<label for="acc-6">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-7">
<label for="acc-7">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-8">
<label for="acc-8">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
</div>
</div>.accordeon {
display: flex;
flex-direction: column;
}
.accordeon .accordeon__item input {
display: none;
}
.accordeon .accordeon__item input:checked ~ .content {
opacity: 1;
font-size: 14px;
transition: font-size 300ms 0ms ease-in, opacity 300ms 300ms ease-in;
}
.accordeon .accordeon__item label {
font-weight: bold;
text-transform: uppercase;
font-size: 16px;
padding: .5em 1em;
cursor: pointer;
}
.accordeon .accordeon__item .content {
font-size: 0;
line-height: 1.25;
padding: 1rem;
opacity: 0;
transition: font-size 300ms 300ms ease-in, opacity 300ms 0ms ease-in;
} <div class="accordeon">
<div class="accordeon__item">
<input type="radio" name="" id="acc-1">
<label for="acc-1">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-2">
<label for="acc-2">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-3">
<label for="acc-3">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-4">
<label for="acc-4">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-5">
<label for="acc-5">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-6">
<label for="acc-6">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-7">
<label for="acc-7">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-8">
<label for="acc-8">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
</div>
</div>.accordeon {
display: flex;
flex-direction: column;
}
.accordeon .accordeon__item input {
display: none;
}
.accordeon .accordeon__item input:checked ~ .content {
opacity: 1;
font-size: 14px;
transition: font-size 300ms 0ms ease-in, opacity 300ms 300ms ease-in;
}
.accordeon .accordeon__item label {
font-weight: bold;
text-transform: uppercase;
font-size: 16px;
padding: .5em 1em;
cursor: pointer;
}
.accordeon .accordeon__item .content {
font-size: 0;
line-height: 1.25;
padding: 1rem;
opacity: 0;
transition: font-size 300ms 300ms ease-in, opacity 300ms 0ms ease-in;
} <div class="accordeon">
<div class="accordeon__item">
<input type="radio" name="" id="acc-1">
<label for="acc-1">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-2">
<label for="acc-2">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-3">
<label for="acc-3">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-4">
<label for="acc-4">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-5">
<label for="acc-5">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-6">
<label for="acc-6">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-7">
<label for="acc-7">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-8">
<label for="acc-8">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
</div>
</div>css radio-button accordion
css radio-button accordion
asked Dec 28 '18 at 12:53
fefefefe
3,0591562115
asked Dec 28 '18 at 12:53
fefefefe
3,0591562115
asked Dec 28 '18 at 12:53
fefefefe
3,0591562115
asked Dec 28 '18 at 12:53
fefefefe
3,0591562115
asked Dec 28 '18 at 12:53
fefefefe
3,0591562115
3,0591562115
1
You needed to add the same name your radio boxes example: <input type="radio" name="toggle" id="acc-1"> <input type="radio" name="toggle" id="acc-2">
– Md. Abu Sayed
Dec 28 '18 at 12:58
Oh thanks a lot, I forgot about this aspect. thanks again
– fefe
Dec 28 '18 at 13:00
add a comment |
1
You needed to add the same name your radio boxes example: <input type="radio" name="toggle" id="acc-1"> <input type="radio" name="toggle" id="acc-2">
– Md. Abu Sayed
Dec 28 '18 at 12:58
Oh thanks a lot, I forgot about this aspect. thanks again
– fefe
Dec 28 '18 at 13:00
1
1
You needed to add the same name your radio boxes example: <input type="radio" name="toggle" id="acc-1"> <input type="radio" name="toggle" id="acc-2">
– Md. Abu Sayed
Dec 28 '18 at 12:58
You needed to add the same name your radio boxes example: <input type="radio" name="toggle" id="acc-1"> <input type="radio" name="toggle" id="acc-2">
– Md. Abu Sayed
Dec 28 '18 at 12:58
Oh thanks a lot, I forgot about this aspect. thanks again
– fefe
Dec 28 '18 at 13:00
Oh thanks a lot, I forgot about this aspect. thanks again
– fefe
Dec 28 '18 at 13:00
add a comment |
1 Answer
1
active
oldest
votes
0
you just edit radio type name blank to same all name then work successfully.
Make you also this code here..
.accordeon {
display: flex;
flex-direction: column;
}
.accordeon .accordeon__item input {
display: none;
}
.accordeon .accordeon__item input:checked ~ .content {
opacity: 1;
font-size: 14px;
transition: font-size 300ms 0ms ease-in, opacity 300ms 300ms ease-in;
}
.accordeon .accordeon__item label {
font-weight: bold;
text-transform: uppercase;
font-size: 16px;
padding: .5em 1em;
cursor: pointer;
}
.accordeon .accordeon__item .content {
font-size: 0;
line-height: 1.25;
padding: 1rem;
opacity: 0;
transition: font-size 300ms 300ms ease-in, opacity 300ms 0ms ease-in;
} <div class="accordeon">
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-1">
<label for="acc-1">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-2">
<label for="acc-2">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-3">
<label for="acc-3">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-4">
<label for="acc-4">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-5">
<label for="acc-5">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-6">
<label for="acc-6">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-7">
<label for="acc-7">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-8">
<label for="acc-8">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
</div>
</div>answered Dec 28 '18 at 13:01
Md. Abu SayedMd. Abu Sayed
4961313
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53958923%2fcss-accordion-with-radio-buttons-conflicts-on-checked%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
you just edit radio type name blank to same all name then work successfully.
Make you also this code here..
.accordeon {
display: flex;
flex-direction: column;
}
.accordeon .accordeon__item input {
display: none;
}
.accordeon .accordeon__item input:checked ~ .content {
opacity: 1;
font-size: 14px;
transition: font-size 300ms 0ms ease-in, opacity 300ms 300ms ease-in;
}
.accordeon .accordeon__item label {
font-weight: bold;
text-transform: uppercase;
font-size: 16px;
padding: .5em 1em;
cursor: pointer;
}
.accordeon .accordeon__item .content {
font-size: 0;
line-height: 1.25;
padding: 1rem;
opacity: 0;
transition: font-size 300ms 300ms ease-in, opacity 300ms 0ms ease-in;
} <div class="accordeon">
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-1">
<label for="acc-1">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-2">
<label for="acc-2">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-3">
<label for="acc-3">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-4">
<label for="acc-4">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-5">
<label for="acc-5">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-6">
<label for="acc-6">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-7">
<label for="acc-7">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-8">
<label for="acc-8">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
</div>
</div>answered Dec 28 '18 at 13:01
Md. Abu SayedMd. Abu Sayed
4961313
add a comment |
0
you just edit radio type name blank to same all name then work successfully.
Make you also this code here..
.accordeon {
display: flex;
flex-direction: column;
}
.accordeon .accordeon__item input {
display: none;
}
.accordeon .accordeon__item input:checked ~ .content {
opacity: 1;
font-size: 14px;
transition: font-size 300ms 0ms ease-in, opacity 300ms 300ms ease-in;
}
.accordeon .accordeon__item label {
font-weight: bold;
text-transform: uppercase;
font-size: 16px;
padding: .5em 1em;
cursor: pointer;
}
.accordeon .accordeon__item .content {
font-size: 0;
line-height: 1.25;
padding: 1rem;
opacity: 0;
transition: font-size 300ms 300ms ease-in, opacity 300ms 0ms ease-in;
} <div class="accordeon">
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-1">
<label for="acc-1">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-2">
<label for="acc-2">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-3">
<label for="acc-3">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-4">
<label for="acc-4">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-5">
<label for="acc-5">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-6">
<label for="acc-6">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-7">
<label for="acc-7">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-8">
<label for="acc-8">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
</div>
</div>answered Dec 28 '18 at 13:01
Md. Abu SayedMd. Abu Sayed
4961313
add a comment |
0
0
0
you just edit radio type name blank to same all name then work successfully.
Make you also this code here..
.accordeon {
display: flex;
flex-direction: column;
}
.accordeon .accordeon__item input {
display: none;
}
.accordeon .accordeon__item input:checked ~ .content {
opacity: 1;
font-size: 14px;
transition: font-size 300ms 0ms ease-in, opacity 300ms 300ms ease-in;
}
.accordeon .accordeon__item label {
font-weight: bold;
text-transform: uppercase;
font-size: 16px;
padding: .5em 1em;
cursor: pointer;
}
.accordeon .accordeon__item .content {
font-size: 0;
line-height: 1.25;
padding: 1rem;
opacity: 0;
transition: font-size 300ms 300ms ease-in, opacity 300ms 0ms ease-in;
} <div class="accordeon">
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-1">
<label for="acc-1">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-2">
<label for="acc-2">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-3">
<label for="acc-3">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-4">
<label for="acc-4">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-5">
<label for="acc-5">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-6">
<label for="acc-6">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-7">
<label for="acc-7">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-8">
<label for="acc-8">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
</div>
</div>answered Dec 28 '18 at 13:01
Md. Abu SayedMd. Abu Sayed
4961313
you just edit radio type name blank to same all name then work successfully.
Make you also this code here..
.accordeon {
display: flex;
flex-direction: column;
}
.accordeon .accordeon__item input {
display: none;
}
.accordeon .accordeon__item input:checked ~ .content {
opacity: 1;
font-size: 14px;
transition: font-size 300ms 0ms ease-in, opacity 300ms 300ms ease-in;
}
.accordeon .accordeon__item label {
font-weight: bold;
text-transform: uppercase;
font-size: 16px;
padding: .5em 1em;
cursor: pointer;
}
.accordeon .accordeon__item .content {
font-size: 0;
line-height: 1.25;
padding: 1rem;
opacity: 0;
transition: font-size 300ms 300ms ease-in, opacity 300ms 0ms ease-in;
} <div class="accordeon">
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-1">
<label for="acc-1">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-2">
<label for="acc-2">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-3">
<label for="acc-3">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-4">
<label for="acc-4">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-5">
<label for="acc-5">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-6">
<label for="acc-6">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-7">
<label for="acc-7">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-8">
<label for="acc-8">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
</div>
</div>.accordeon {
display: flex;
flex-direction: column;
}
.accordeon .accordeon__item input {
display: none;
}
.accordeon .accordeon__item input:checked ~ .content {
opacity: 1;
font-size: 14px;
transition: font-size 300ms 0ms ease-in, opacity 300ms 300ms ease-in;
}
.accordeon .accordeon__item label {
font-weight: bold;
text-transform: uppercase;
font-size: 16px;
padding: .5em 1em;
cursor: pointer;
}
.accordeon .accordeon__item .content {
font-size: 0;
line-height: 1.25;
padding: 1rem;
opacity: 0;
transition: font-size 300ms 300ms ease-in, opacity 300ms 0ms ease-in;
} <div class="accordeon">
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-1">
<label for="acc-1">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-2">
<label for="acc-2">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-3">
<label for="acc-3">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-4">
<label for="acc-4">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-5">
<label for="acc-5">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-6">
<label for="acc-6">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-7">
<label for="acc-7">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-8">
<label for="acc-8">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
</div>
</div>.accordeon {
display: flex;
flex-direction: column;
}
.accordeon .accordeon__item input {
display: none;
}
.accordeon .accordeon__item input:checked ~ .content {
opacity: 1;
font-size: 14px;
transition: font-size 300ms 0ms ease-in, opacity 300ms 300ms ease-in;
}
.accordeon .accordeon__item label {
font-weight: bold;
text-transform: uppercase;
font-size: 16px;
padding: .5em 1em;
cursor: pointer;
}
.accordeon .accordeon__item .content {
font-size: 0;
line-height: 1.25;
padding: 1rem;
opacity: 0;
transition: font-size 300ms 300ms ease-in, opacity 300ms 0ms ease-in;
} <div class="accordeon">
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-1">
<label for="acc-1">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-2">
<label for="acc-2">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-3">
<label for="acc-3">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-4">
<label for="acc-4">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-5">
<label for="acc-5">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-6">
<label for="acc-6">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-7">
<label for="acc-7">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-8">
<label for="acc-8">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
</div>
</div>answered Dec 28 '18 at 13:01
Md. Abu SayedMd. Abu Sayed
4961313
answered Dec 28 '18 at 13:01
Md. Abu SayedMd. Abu Sayed
4961313
answered Dec 28 '18 at 13:01
Md. Abu SayedMd. Abu Sayed
4961313
answered Dec 28 '18 at 13:01
Md. Abu SayedMd. Abu Sayed
4961313
4961313
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53958923%2fcss-accordion-with-radio-buttons-conflicts-on-checked%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
You needed to add the same name your radio boxes example: <input type="radio" name="toggle" id="acc-1"> <input type="radio" name="toggle" id="acc-2">
– Md. Abu Sayed
Dec 28 '18 at 12:58
Oh thanks a lot, I forgot about this aspect. thanks again
– fefe
Dec 28 '18 at 13:00