jeudi 4 février 2016

Using a checkbox within an checkbox accordion?

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://ift.tt/1Ks6aU2




Aucun commentaire:

Enregistrer un commentaire