CSS accordion with nested accordion is not working

Question

I want accordion control without any javascript,

so I got accordion like this :

http://jsfiddle.net/2QsHz/

<div class="accordion vertical">
    <ul>
        <li>
            <input type="radio" id="radio-1" name="radio-accordion" checked="checked" />
            <label for="radio-1">Title1</label>
            <div class="content">
                <lable>THis is Nested accordion control </lable>
                <div class="accordion vertical">
                    <ul>
                        <li>
                            <input type="radio" id="radio11" name="radio-accordion" checked="checked" />
                            <label for="radio11">Title1.1</label>
                            <div class="content">Title1.1 Content</div>
                        </li>
                        <li>
                            <input type="radio" id="radio12" name="radio-accordion" checked="checked" />
                            <label for="radio12">Title1.2</label>
                            <div class="content">Title1.2 Content</div>
                        </li>
                    </ul>
                </div>
            </div>
        </li>
        <li>
            <input type="radio" id="radio-2" name="radio-accordion" />
            <label for="radio-2">Title2</label>
            <div class="content">
                <h3>Totally another one right here</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem luctus porttitor vestibulum, eros sapien mattis libero, euismod congue neque nisi at ipsum. Mauris semper ipsum sit amet metus semper malesuada. Donec vel est justo, ac porta diam.</p>
                <p>In ut est in orci commodo blandit. Cras rhoncus ultricies augue. Proin quam odio, venenatis ut tempus tristique, aliquet in velit. Pellentesque volutpat facilisis orci, ut congue mi rhoncus at. Nullam vehicula dignissim neque, sed rhoncus magna ultricies et.</p>
            </div>
        </li>
        <li>
            <input type="radio" id="radio-3" name="radio-accordion" />
            <label for="radio-3">Title3</label>
            <div class="content">
                <h3>Totally another one right here</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem luctus porttitor vestibulum, eros sapien mattis libero, euismod congue neque nisi at ipsum. Mauris semper ipsum sit amet metus semper malesuada. Donec vel est justo, ac porta diam.</p>
                <p>In ut est in orci commodo blandit. Cras rhoncus ultricies augue. Proin quam odio, venenatis ut tempus tristique, aliquet in velit. Pellentesque volutpat facilisis orci, ut congue mi rhoncus at. Nullam vehicula dignissim neque, sed rhoncus magna ultricies et.</p>
            </div>
        </li>
    </ul>

</div>

but in 1 accordion panel ..I have nested accordion , when I click on it, whole accordion close.

I want to see nested accordion there.

Answer 1

A different solution

here comes the css

.accordion {
font-family:Arial, Helvetica, sans-serif; 
margin:0 auto;
font-size:14px;
border:1px solid #542437;
border-radius:10px;
width:600px;
padding:10px;
background:#fff;
}
.accordion ul {
list-style:none;
margin:0;
padding:0;    
}
.accordion li {
margin:0;
padding:0;
}
.accordion [type=radio], .accordion [type=checkbox] {
display:none;
}
.accordion label {
display:block;
font-size:16px;
line-height:16px;
background:#D95B43;
border:1px solid #542437;
color:#542437;
text-shadow:1px 1px 1px rgba(255,255,255,0.3);
font-weight:700;
cursor:pointer;
text-transform:uppercase;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
}
.accordion ul li label:hover, .accordion [type=radio]:checked ~ label, .accordion             [type=checkbox]:checked ~ label {
background:#C02942;
color:#FFF;
text-shadow:1px 1px 1px rgba(0,0,0,0.5)
}
.accordion .content {
padding:0 10px;
overflow:hidden;
border:1px solid #fff; /* Make the border match the background so it fades in nicely */
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
}
.accordion p {
color:#333;
margin:0 0 10px;
}
.accordion h3 {
color:#542437;
padding:0;
margin:10px 0;
}

.vertical ul li {
overflow:hidden;
margin:0 0 1px;
}
.vertical ul li label {
padding:10px;
}

.content,.inner-content{
display:none;
}


.accordion [type=radio]:checked ~ .content{
display:block;
}


.inner [type=radio]:checked ~ .inner-content{
display:block;
}

the html mark up as follows

<div class="accordion vertical">
<ul>
    <li>
        <input type="radio" id="radio-1" name="radio-accordion" checked="checked" />
        <label for="radio-1">Title1</label>
            <div class="inner content">
                <ul>
                    <li>
                        <input type="radio" id="radio11" name="radio-accordion1" />
                        <label for="radio11">Title1.1</label>
                        <div class="inner-content">Title1.1 Content</div>
                    </li>
                    <li>
                        <input type="radio" id="radio12" name="radio-accordion1" />
                        <label for="radio12">Title1.2</label>
                        <div class="inner-content">Title1.2 Content</div>
                    </li>
                </ul>
            </div>
    </li>
    <li>
        <input type="radio" id="radio-2" name="radio-accordion" />
        <label for="radio-2">Title2</label>
        <div class="content">
            <h3>Totally another one right here</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem luctus porttitor vestibulum, eros sapien mattis libero, euismod congue neque nisi at ipsum. Mauris semper ipsum sit amet metus semper malesuada. Donec vel est justo, ac porta diam.</p>
            <p>In ut est in orci commodo blandit. Cras rhoncus ultricies augue. Proin quam odio, venenatis ut tempus tristique, aliquet in velit. Pellentesque volutpat facilisis orci, ut congue mi rhoncus at. Nullam vehicula dignissim neque, sed rhoncus magna ultricies et.</p>
        </div>
    </li>
    <li>
        <input type="radio" id="radio-3" name="radio-accordion" />
        <label for="radio-3">Title3</label>
        <div class="content">
            <h3>Totally another one right here</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem luctus porttitor vestibulum, eros sapien mattis libero, euismod congue neque nisi at ipsum. Mauris semper ipsum sit amet metus semper malesuada. Donec vel est justo, ac porta diam.</p>
            <p>In ut est in orci commodo blandit. Cras rhoncus ultricies augue. Proin quam odio, venenatis ut tempus tristique, aliquet in velit. Pellentesque volutpat facilisis orci, ut congue mi rhoncus at. Nullam vehicula dignissim neque, sed rhoncus magna ultricies et.</p>
        </div>
    </li>
</ul>

</div>

Answer 2

use different name for nested accordion buttons.. and remove checked option.. and changed the height of inner accordion

now your code looks like this:

CSS: (only added the last section height 200 for inner accordion )

/* Shared for all accordion types */
.accordion {
    font-family:Arial, Helvetica, sans-serif; 
    margin:0 auto;
    font-size:14px;
    border:1px solid #542437;
    border-radius:10px;
    width:600px;
    padding:10px;
    background:#fff;
}
.accordion ul {
    list-style:none;
    margin:0;
    padding:0;    
}
.accordion li {
    margin:0;
    padding:0;
}
.accordion [type=radio], .accordion [type=checkbox] {
    display:none;
}
.accordion label {
    display:block; 
    font-size:16px;
    line-height:16px;
    background:#D95B43;
    border:1px solid #542437;
    color:#542437;
    text-shadow:1px 1px 1px rgba(255,255,255,0.3);
    font-weight:700;
    cursor:pointer;
    text-transform:uppercase;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;  
}
.accordion ul li label:hover, .accordion [type=radio]:checked ~ label, .accordion [type=checkbox]:checked ~ label {
    background:#C02942;
    color:#FFF;
    text-shadow:1px 1px 1px rgba(0,0,0,0.5)
}
.accordion .content {
    padding:0 10px;
    overflow:hidden; 
    border:1px solid #fff; /* Make the border match the background so it fades in nicely */
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out; 
}
.accordion p {
    color:#333;
    margin:0 0 10px;
}
.accordion h3 {
    color:#542437;
    padding:0;
    margin:10px 0;
}


/* Vertical */
.vertical ul li {
    overflow:hidden; 
    margin:0 0 1px;
}
.vertical ul li label {
    padding:10px;
}
.vertical [type=radio]:checked ~ label, .vertical [type=checkbox]:checked ~ label {
    border-bottom:0;
}
.vertical ul li label:hover {
    border:1px solid #542437; /* We don't want the border to disappear on hover */
}
.vertical ul li .content {
    height:0px;
    border-top:0;
}
.vertical [type=radio]:checked ~ label ~ .content, .vertical [type=checkbox]:checked ~ label ~ .content {
    height:300px;
    border:1px solid #542437;
}

.vertical .vertical [type=radio]:checked ~ label ~ .content, .vertical .vertical [type=checkbox]:checked ~ label ~ .content {
    height:150px;
    border:1px solid #542437;
}

HTML: (changed the name to radio-accordion1)

   <div class="accordion vertical">
    <ul>
        <li>
            <input type="radio" id="radio-1" name="radio-accordion" checked="checked" />
            <label for="radio-1">Title1</label>
            <div class="content">
                <div class="accordion vertical">
                    <ul>
                        <li>
                            <input type="radio" id="radio11" name="radio-accordion1" />
                            <label for="radio11">Title1.1</label>
                            <div class="content">Title1.1 Content</div>
                        </li>
                        <li>
                            <input type="radio" id="radio12" name="radio-accordion1" />
                            <label for="radio12">Title1.2</label>
                            <div class="content">Title1.2 Content</div>
                        </li>
                    </ul>
                </div>
            </div>
        </li>
        <li>
            <input type="radio" id="radio-2" name="radio-accordion" />
            <label for="radio-2">Title2</label>
            <div class="content">
                <h3>Totally another one right here</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem luctus porttitor vestibulum, eros sapien mattis libero, euismod congue neque nisi at ipsum. Mauris semper ipsum sit amet metus semper malesuada. Donec vel est justo, ac porta diam.</p>
                <p>In ut est in orci commodo blandit. Cras rhoncus ultricies augue. Proin quam odio, venenatis ut tempus tristique, aliquet in velit. Pellentesque volutpat facilisis orci, ut congue mi rhoncus at. Nullam vehicula dignissim neque, sed rhoncus magna ultricies et.</p>
            </div>
        </li>
        <li>
            <input type="radio" id="radio-3" name="radio-accordion" />
            <label for="radio-3">Title3</label>
            <div class="content">
                <h3>Totally another one right here</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem luctus porttitor vestibulum, eros sapien mattis libero, euismod congue neque nisi at ipsum. Mauris semper ipsum sit amet metus semper malesuada. Donec vel est justo, ac porta diam.</p>
                <p>In ut est in orci commodo blandit. Cras rhoncus ultricies augue. Proin quam odio, venenatis ut tempus tristique, aliquet in velit. Pellentesque volutpat facilisis orci, ut congue mi rhoncus at. Nullam vehicula dignissim neque, sed rhoncus magna ultricies et.</p>
            </div>
        </li>
    </ul>

</div>

Answer 3

Change inner radio name like name="radio-accordion2" and add another css :

.vertical .vertical [type=radio]:checked ~ label ~ .content,.vertical  .vertical [type=checkbox]:checked ~ label ~ .content {
    height:200px;
}