Bootstrap 3 sidebar sumbenu expansion - html

Question

Trying to understand the twitter bootstrap 3 sidebar navigation, e.g.: http://getbootstrap.com/javascript/
Here are already many questions about it (mainly about the affix), but i have an specific one.
I understand:
how to affix the sidebar, e.g.
$('#sidemenu').affix({
offset: {
top: 60
}
});
also is easy the scrollspy alone.
What i don't understand how is achieved the scrollspy + expanding submenus, e.g. in only the active chapter are shown the subchapters (what are also scrollspy-ed). As in red circle in the next screenshot:
Could someone explain what is basic principe? It is achieved with pure CSS (AFAIK), but when I'm, reading thru the http://getbootstrap.com/assets/css/docs.min.css didn't find how it is achieved.

Answer 1

Are you asking how only on larger views they show the sub-menu and on small they don't?
Before the media queries you will find that the ul is hidden:
.bs-docs-sidebar .nav .nav {
display: none;
padding-bottom: 10px;
}
Then when it's .active INSIDE the media queries it displays:
#media (min-width:992px) {
.bs-docs-sidebar .nav>.active>ul {
display: block
}
.... more styles go here ....
}
TIP: don't look at minified CSS.
If you're wondering how the scrollspy is achieved on the sub menu items, it's the same way as the large, each ID of the content corresponds with the link in the menu.