Using a checkbox within an checkbox accordion? - html

Question

I am trying to create a filter for a website, I made an accordion using check boxs, and I would like to put check boxes within it using
<input name="name" value="value" type="checkbox"/>
However the check box itself wont show.
Here is the code:
<div id="container">
<section id="accordion">
<div>
<input type="checkbox" id="check-1" />
<label for="check-1">Continent</label>
<form action="">
Europe<input name="animal" value="Cat" type="checkbox"/>
</form>
</div>
<div>
<input type="checkbox" id="check-2" />
<label for="check-2">Country</label>
<form action="">
UK<input name="animal" value="Cat" type="checkbox"/>
</form>
</div>
<div>
<input type="checkbox" id="check-3" />
<label for="check-3">League / Competition</label>
<form action="">
Premier League<input name="animal" value="Cat" type="checkbox"/>
</form>
</div>
<div>
<input type="checkbox" id="check-4" />
<label for="check-4">Date</label>
<form action="">
march 13th<input name="animal" value="Cat" type="checkbox"/>
</form>
</div>
</section>
and the CSS:
* {
font-family: Arial, sans;
margin: 0;
padding: 0;
}
h1, h2 {
margin: 1em 0 0 0;
text-align:left;
}
h2 {
margin: 0 0 1em 0;
}
#container {
margin: 10px;
width: 20%;
}
#accordion input {
display: none;
}
#accordion label {
background: #eee;
border-radius: .25em;
cursor: pointer;
display: block;
margin-bottom: .125em;
padding: .25em 1em;
z-index: 20;
}
#accordion label:hover {
background: #ccc;
}
#accordion input:checked + label {
background: #ccc;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
color: white;
margin-: 0;
}
#accordion form{
background: #f7f7f7;
height:0px;
overflow:hidden;
z-index:10;
}
#accordion from input{
padding: 1em;
}
#accordion input:form {
}
#accordion input:checked ~ form {
border-bottom-left-radius: .25em;
border-bottom-right-radius: .25em;
height: auto;
margin-bottom: .125em;
}
DEMO here: http://codepen.io/anon/pen/gPdzWK

Answer 1

So you have a line #accordion input { display: none }, this will hide all the inputs you have.
If you only want to display the input in the form and hide the other ones you can do: #accordion > div > input { display: none } which selects the input that is a direct child of div which itself is a direct child of #accordion.