nested accordion menu in CSS html - html

Question

Based on this thread, I tried to build myself a css/html only accordion menu. When I took what I learned from the above, and applied it to my divs, it worked perfectly. I also needed to add a submenu that acted the same to the first menu item, portfolio. I attempted it with no success. It was explained to me that the reason was that I was using the same target.
(To begin, I am novice when it comes to a lot of these things so while some questions I have might seem fundamental it is because I am learning as I go.)
Based on the feedback, I attempted to make a new version creating 2 accordion classes. While that did not break the functionality I wanted, it still had the problem of opening both of the submenus. When you click PORTFOLIO, BRANDING should appear. When you click BRANDING, CONTENT should appear. Instead when you click PORTFOLIO, BRANDING and CONTENT appear.
It was indicated that this is because the first accordion function includes all child objects. While I've touched on those briefly in the js I'm learning I didn't know how to work with them in css other than the :not(x) I've come across but that did not seem to resolve it in any attempt though I could be doing it wrong.
jsfiddle
Here is the css to the above jsfiddle link:
a {
color:inherit;
text-decoration:none;
font-style:normal;
}
/* ---------- SECTION ---------- */
.accordion p + div :not(.accordion2) {
height: 0;
overflow: hidden;
-webkit-transition: height 0.3s ease-in;
-moz-transition: height 0.3s ease-in;
-o-transition: height 0.3s ease-in;
-ms-transition: height 0.3s ease-in;
transition: height 0.3s ease-in;
}
.accordion :target p + div :not(.accordion2) {
height:auto;
}
.accordion .section.large:target p + div :not(.accordion2) {
overflow: auto;
}
.section p {
color:#FFFfff;
text-align:right;
min-width:200px;
background-color:#2d2d2d;
font-size:12px;
font-size-adjust:inherit;
padding:0px;
margin:0px;
border-top:#161616 1px solid;
text-decoration:none;
text-transform:uppercase;
text-decoration:none;
color:#ffffff;
}
.section p a {
display:block;
text-align:right;
padding-right:10px;
padding-left:10px;
padding-top:3px;
padding-bottom:3px;
min-width:180px;
}
.section p a:hover {
background-color:#c569f2;
}
/* ---------- SubSection ---------- */
.accordion2 p + div {
height: 0;
overflow: hidden;
-webkit-transition: height 0.3s ease-in;
-moz-transition: height 0.3s ease-in;
-o-transition: height 0.3s ease-in;
-ms-transition: height 0.3s ease-in;
transition: height 0.3s ease-in;
}
.accordion2 :target p + div {
height:auto;
}
.accordion2 .subsection.large:target p + div {
overflow: auto;
}
.subsection p {
color:#FFFfff;
text-align:right;
min-width:200px;
background-color:#3d3d3d;
font-size:12px;
font-size-adjust:inherit;
padding:0px;
margin:0px;
border-top:#161616 1px solid;
text-decoration:none;
text-transform:uppercase;
text-decoration:none;
color:#ffffff;
}
.subsection p a {
display:block;
text-align:right;
padding-right:10px;
padding-left:10px;
padding-top:3px;
padding-bottom:3px;
min-width:180px;
}
.subsection p a:hover {
background-color:#c39bda;
}
/* ---------- Sidebar ---------- */
#sidebar {
float: right;
right: 0px;
background-color:#161616;
position:fixed;
width:20%;
min-height: 100%;
min-width: 200px;
top:0px;
}
#side-menu {
right: 0px;
top:0px;
position:absolute;
height:75%;
width:100%;
min-width: 200px;
bottom:0px;
margin-bottom:0px;
min-height:600px;
}
Here is the html:
<div id="sidebar">
<div id="side-menu" class="accordion">
<div id="menu-portfolio" class="section">
<p> Portfolio
</p>
<div class="accordion2">
<div id="submenu-branding" class="subsection">
<p> Branding
</p>
<div>
<p> Content
</p>
</div>
</div>
</div>
</div>
<div id="menu-about" class="section">
<p> About
</p>
<div>
<p>Resume
</p>
</div>
</div>
<div id="menu-contact" class="section">
<p> Contact
</p>
<div>
<p>Content
</p>
<p>Content2
</p>
<p>Content3
</p>
</div>
</div>
</div>
</div>
Can anyone assist me in understanding what I am doing wrong?

Answer 1

It doesn't matter if you use divs or lists (though most tutorials will use lists). Its mostly referencing the right item. Looking briefly at the code, you are not specifying to not show the sub sub menu.
I've added a new class to your first content and what the target does in css - showing only the div right after:
HTML:
<div class="subsub"> <!--added a new class. I have never used :not, but it seems that it does't allow nesting inside :not selectors -->
<p>Content</p>
</div>
CSS:
.accordion :target p + div :not(.subsub) {
height:auto;
}
You have to reiterate what you have done to show the sub menu when clicking on portfolio onto the sub sub menu when clicking on branding.
A quick fiddle: http://jsfiddle.net/jennift/m4ADf/2/

Answer 2

I haven't looked into your code, but like you've said "it includes all child objects". You can prevent this by using the direct descendant selector ">". It will only get the direct child elements, e.g.
ul > li {
}
will only style the li element and no other li elements inside it.