My goal is to design a vertical menu that expands when clicked, revealing 3 links for each item. I currently have the following setup:
This is the initial layout:
After clicking all items:
The code I've implemented so far looks like this:
<!DOCTYPE html>
<body>
<div class="accordion" id="leftMenu">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-parent="#leftMenu"
data-toggle="collapse" href="#collapseTwo"><i class=
"icon-th"></i> Item 1</a>
</div>
<div class="accordion-body collapse" id="collapseTwo" style=
"height: 0px;">
<div class="accordion-inner">
<ul>
<li>This is one</li>
<li>This is two</li>
<li>This is Three</li>
</ul>
</div>
</div>
</div>
(additional accordion-groups with similar structure)
</div>
</body>
</html>
I have successfully achieved the expand-on-click functionality, as demonstrated in thisjsFiddle Demo.
However, my issue lies in the layout - it currently spans the entire screen width and the sub-menu items are not displayed as block elements.
To make my question more specific, I would like to know:
How can I contain the menu within a designated main container that only takes up a portion of the screen width?
Is there a way to display nested
<li>elements as clickable box-like divs?
Being new to Twitter Bootstrap, I suspect I may be missing something essential. Could someone guide me on the correct approach to achieve the desired layout?