CODEWITHSUNDEEP
jquerycsstwitter-bootstrapnavigation
smeeb
smeeb

Reputation: 29487

Implementing collapsible tabbed pane in Bootstrap 3 and jQuery

Here is the jsFiddle with full code example.

I'm trying to implement a fairly sophisticated widget in Bootstrap 3/jQuery and am struggling to even find the right approach to tackling it. I want to present my users with the following collapsible navigation menu:

Where, on page load, only the 3 top-level menu items (Fizz Stuff, Buzz Stuff and Foo Stuff) are visible to the user. Only if the user clicks on one of these menu items does it expand into any existing submenus. If they click the main menu again, if it was expanded it will collapse back to its original state. Any selected menu item (top-level or otherwise) will act as the current selected tab in a tabbed pane.

So, for example, on page load the user sees:

enter image description here

Then, if they click the Buzz Stuff menu item, they'll see two submenus: Edit Widget and Goto Moon. If they click Edit Widget, they'll see:

enter image description here

I also need nesting so that submenus can have submenus that have submenus, etc.; all with this expanding/collapsing and tabbed pane behavior.

My attempt to accomplish this has failed miserably. As you can see in the jsFiddle, my main problem is that all the <div> tags that comprise the content for each tab display on page load, and they display below the nav menu. Instead, the only time the content div for a menu should be visible is if that menu was just clicked/selected. As soon as another menu is selected, the content pane for that menu/tab should change.

For example, clicking:

<li><a href="#">Goto Mars</a></li>

Should only show us:

<div id="goto-mars-content">
    <h1>You are now on Mars.</h1>
</div>

So a few things:

  1. Are "content <div>s" even the best way to handle this? Is there something more Bootstrappy, some other widget, such as a <ul>, etc.?
  2. How do I get all the content to be invisible on page load, and to only load the content for the menu that was just selected?
  3. Styling: how do I put a border around this entire widget (that is, both the left nav menu and tabbed pane content)?

Upvotes: 0

Views: 613

Answers (1)

Wes Duff
Wes Duff

Reputation: 373

  1. In HTML you need to be semantic. Usually for navigation you want to use the nav tag. For the right side content a div tag is fine.
  2. To do this you want to use bootstraps tabs. Bootstrap has a good article with code written here.
  3. To put a border around something you would use CSS border declaration.

http://liveweave.com/3Sseg0

Update

answer from comments Here is a liveweave of your request.

Upvotes: 1

Related Questions