I just set up a beautiful accordion menu with CSS only, using radio buttons to ensure that not more than one sub-menu is open at a time.
The problem is that I want to combine some radio buttons that have sub-menus with some radio buttons that don't: So the ones with sub-menus expand into a list of links when checked, but the others are just links that redirect to another index page.
I want to combine both in the same list so all other sub-menus collapse when the link/radio buttons are checked, but it seems that as soon as a radio button becomes a link, it stops working as a radio (so the link still works but the other radios also remain checked). How can I fix this?
I'm not a professional nor have I ever been given any training so it's expected that I've made some mistakes in the code, any corrections are very much appreciated.
Thanks in advance,
The code is below,
CSS:
.accordion label {
position: relative;
display: block;
cursor: pointer;
line-height: 33px;
background: transparent;
}
.accordion label:hover {
background: rgba(243, 243, 243, 0.09);
}
.accordion input + label {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.accordion input:checked + label,
.accordion input:checked + label:hover {
background: rgba(205, 236, 197, 0);
}
.accordion input {
display: none;
}
.accordion .article {
background: transparent;
overflow: hidden;
width: 140px;
height: 0px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin-left: 10px;
line-height: 33px;
}
.accordion .article p {
font-style: italic;
padding: 20px;
}
.accordion input:checked ~ .article {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.accordion input:checked ~ .article.ac-small {
height: auto;
}
.accordion input:checked ~ .article.ac-medium {
height: auto;
}
.accordion input:checked ~ .article.ac-large {
height: auto;
}
.accordion input {
display: none;
}
html:
<div class="container">
<div class="accordion">
<div>
<input id="ac-1" name="accordion-1" type="radio" />
<label for="ac-1"><a href="Home" rel="history">Title Here</a></label>
</div>
<div>
<input id="ac-2" name="accordion-1" type="radio" />
<label for="ac-2">film</label>
<div class="article ac-small">
<a href="spleen" rel="history">spleen, 2014</a>
<br>
<a href="girl-before-a-mirror" rel="history">girl before a mirror, 2015</a>
<br>
<a href="coming-soon" rel="history">playground (soon)</a>
<br>
<a href="coming-soon" rel="history">hand job (soon)</a>
</div>
</div>
<div>
<input id="ac-3" name="accordion-1" type="radio" />
<label for="ac-3">video</label>
<div class="article ac-medium">
<a href="this-is-britain" rel="history">this is britain, 2014</a>
<br>
<a href="mind-glitch" rel="history">mind glitch, 2014</a>
<br>
<a href="coming-soon" rel="history">film in a bottle, 2015 (soon)</a>
</div>
</div>
<div>
<input id="ac-4" name="accordion-1" type="radio" />
<label for="ac-4">stills</label>
<div class="article ac-large">
<a href="carpool" rel="history">carpool, 2014</a>
<br>
<a href="berlin-streets" rel="history">berlin streets, 2013</a>
<br>
<a href="serpentine" rel="history">serpentine, 2013</a>
<br>
<a href="the-three-ages" rel="history">the three ages, 2013</a>
</div>
</div>
<div>
<input id="ac-5" name="accordion-1" type="radio" />
<label for="ac-5">collage</label>
<div class="article ac-large">
<a href="spartacus" rel="history">spartacus, 2014</a>
<br>
<a href="white-ambition" rel="history">white ambition, 2014</a>
</div>
</div>
<div>
<input id="ac-6" name="accordion-1" type="radio" />
<label for="ac-6"><a href="who" rel="history">About</a></label>
</div>
</div>
</div>
</div>
</div>