Реализация складной панели с вкладками в Bootstrap 3 и jQuery

Question

Вот jsFiddle с полным кодом.

Я пытаюсь реализовать довольно сложный виджет в Bootstrap 3/jQuery и изо всех сил пытаюсь найти правильный подход к его решению. Я хочу представить свои пользователь со следующего складного меню навигации:

• Fizz Материалом
  • Goto Марс
  • Eat Pizza
• Buzz Материал
  • Edit Widget
  • Goto Moon
• Foo Материал

Где, на странице загрузки, только пункты меню, 3 верхнего уровня (Fizz материал, Базз материал и Foo вещи) являются видимыми для пользователя. Только если пользователь нажимает на один из этих пунктов меню, он расширяется в любые существующие подменю. Если они снова щелкнут по главному меню, если он был расширен, он снова упадет в исходное состояние. Любой выбранный пункт меню (верхний или другой) будет действовать как текущая выбранная вкладка в панели с вкладками.

Так, например, на странице загрузки пользователь видит:

Затем, если они выберите пункт Buzz Stuff меню, они будут видеть два подменю: Edit Widget и Goto Луны. Если нажать Edit Widget, они будут видеть:

мне также нужно вложенности, так что подменю может иметь подменю, которые имеют подменю, и т.д .; все с этим разворачивающим/сворачивающимся и перемещаемым положением.

Моя попытка выполнить это потерпела неудачу. Как вы можете видеть в jsFiddle, моя основная проблема заключается в том, что все теги <div>, которые содержат контент для каждой вкладки, отображаются при загрузке страницы, и они отображают ниже навигационное меню. Вместо этого, единственный раз, когда содержимое div для меню должно быть видимым, - это просто щелкнуть/выбрать это меню. Как только будет выбрано другое меню, панель содержимого для этого меню/вкладки должна измениться.

Например, нажатие кнопки:

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

Если только показать нам:

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

Так несколько вещей:

1. Are "Публикации <div> S" даже самый лучший способ справиться с этим? Есть ли что-то еще Bootstrappy, какой-то другой виджет, такой как <ul> и т. Д.?
2. Как заставить весь контент невидимым при загрузке страницы и загружать только контент для выбранного меню?
3. Styling: как разместить рамку вокруг всего виджета (то есть как в левом навигационном меню, так и в содержимом с вкладками)?

Answer 1

1. В HTML вы должны быть семантическими. Обычно для навигации вы хотите использовать тег nav. Для правильного содержимого a тэг div в порядке.
2. Для этого вы хотите использовать бутстрапы tabs. У Bootstrap есть хорошая статья с кодом, написанным здесь.
3. Чтобы разместить границу вокруг чего-либо, вы должны использовать объявление CSS border.

http://liveweave.com/3Sseg0

Update

ответ от комментариев Вот liveweave из вашего запроса.