How can I make a Bootstrap .nav-list hide and show distinct div elements?

Question

I just used a Bootstrap .nav-tabs which actually makes the tab function of showing/hidding content:

<div class="tabbable">
    <ul class="nav nav-tabs">
        <li><a href="#tab-perfiles" data-toggle="tab">Perfiles</a></li>
        <li><a href="#tab-mallas" data-toggle="tab">Mallas</a></li>
        <li><a href="#tab-laminas" data-toggle="tab">Láminas</a></li>
        <li><a href="#tab-corrugado" data-toggle="tab">Corrugado</a></li>
        <li><a href="#tab-cables" data-toggle="tab">Cables</a></li>
        <li><a href="#tab-tecnologico" data-toggle="tab">Tecnológico</a></li>
    </ul>

    <div class="tab-content">

        <div class="tab-pane" id="tab-perfiles">

        </div>

        <div class="tab-pane" id="tab-mallas">

        </div>

    </div>
</div>

So clicking at any tab will make the div inside .tab-content being displayed and hiding the rest.

But what about using a .nav-list ?

For example, I got:

<ul class="nav nav-list">
    <li class="active"><a href="/">Home</a></li>
    <li><a href="#someDiv">Info</a></li>
    <li><a href="#anotherDiv">Applications</a></li>
    <li><a href="#thisOtherDiv">Profile</a></li>
    <li><a href="#lastDiv">Team</a></li>
</ul>

I want it to be able to do the same, I tried using it within a .tabbable and adding a .tab-content below but got not results.

Actually I'd like the .nav-list and its contents to be inside a .tab-content :

<div class="tabbable">

    <ul class="nav nav-tabs">
        <li><a href="#tab-perfiles" data-toggle="tab">Perfiles</a></li>
        <li><a href="#tab-mallas" data-toggle="tab">Mallas</a></li>
        <li><a href="#tab-laminas" data-toggle="tab">Láminas</a></li>
        <li><a href="#tab-corrugado" data-toggle="tab">Corrugado</a></li>
        <li><a href="#tab-cables" data-toggle="tab">Cables</a></li>
        <li><a href="#tab-tecnologico" data-toggle="tab">Tecnológico</a></li>
    </ul>

    <div class="tab-content">

        <div class="tab-pane" id="tab-perfiles">
            <div class="row tab-categoria-producto">
                    <div class="col-sm-3">
                        <ul class="nav nav-list">
                            <li class="active"><a href="/">Home</a></li>
                            <li><a href="#someDiv">Sasha</a></li>
                            <li><a href="#anotherDiv">Applications</a></li>
                            <li><a href="#thisOtherDiv">Profile</a></li>
                            <li><a href="#lastDiv">Akira</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-2">
                        <div id="sasha">Hola Sasha</div>
                    </div>
                    <div class="col-sm-2">
                        <div id="akira">Hola Akira</div>
                    </div>                            
            </div>
        </div>

        <div class="tab-pane" id="tab-mallas">

        </div>

        <div class="tab-pane" id="tab-laminas">

        </div>

        <div class="tab-pane" id="tab-corrugado">

        </div>

        <div class="tab-pane" id="tab-cables">

        </div>

        <div class="tab-pane" id="tab-tecnologico">

        </div>                
        <!-- Fin tab content   --> 
    </div>

</div> <!-- Fin tabbable   --> 

I include this fiddle

Answer 1

This is possible without your own JS. You just need the correct structure and class names.

Here's your corrected markup:

<!-- Top Tabs -->
<ul class="nav nav-tabs">
    <li class="active"><a href="#tab-perfiles" data-toggle="tab">Perfiles</a></li>
    <li><a href="#tab-mallas" data-toggle="tab">Mallas</a></li>
    <li><a href="#tab-laminas" data-toggle="tab">Láminas</a></li>
    <li><a href="#tab-corrugado" data-toggle="tab">Corrugado</a></li>
    <li><a href="#tab-cables" data-toggle="tab">Cables</a></li>
    <li><a href="#tab-tecnologico" data-toggle="tab">Tecnológico</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="tab-perfiles">
        <div class="container-fluid">
            <div class="row tab-categoria-producto">
                <!-- Tab 1 navigation -->
                <ul class="col-sm-3 nav nav-list">
                    <li class="active"><a href="#sasha" data-toggle="tab">Sasha</a></li>
                    <li><a href="#akira" data-toggle="tab">Akira</a></li>
                </ul>
                <!-- Tab 1 content -->
                <div class="col-sm-9">
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div class="tab-pane active" id="sasha">Hola Sasha</div>
                        <div class="tab-pane" id="akira">Hola Akira</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-pane" id="tab-mallas">Content 2</div>
    <div class="tab-pane" id="tab-laminas">Content 3</div>
    <div class="tab-pane" id="tab-corrugado">Content 4</div>
    <div class="tab-pane" id="tab-cables">Content 5</div>
    <div class="tab-pane" id="tab-tecnologico">Content 6</div>
    <!-- Fin tab content -->
</div>

Demo

Here's another demo of this that's less busy (it has less tabs and is cleaner as it only uses the necessary classes, rather than the OP's additional ones), in case others want to see it).

Nice clean demo

Answer 2

Take a look at following example, a simple effort from my side. I hope it may work for you:

 <div id="rootwizard">
    <ul>
        <li><a href="#tab1" data-toggle="tab">First</a></li>
        <li><a href="#tab2" data-toggle="tab">Second</a></li>
        <li><a href="#tab3" data-toggle="tab">Third</a></li>
        <li><a href="#tab4" data-toggle="tab">Forth</a></li>
        <li><a href="#tab5" data-toggle="tab">Fifth</a></li>
        <li><a href="#tab6" data-toggle="tab">Sixth</a></li>
        <li><a href="#tab7" data-toggle="tab">Seventh</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane" id="tab1">
          1
        </div>
        <div class="tab-pane" id="tab2">
          2
        </div>
        <div class="tab-pane" id="tab3">
            3
        </div>
        <div class="tab-pane" id="tab4">
            4
        </div>
        <div class="tab-pane" id="tab5">
            5
        </div>
        <div class="tab-pane" id="tab6">
            6
        </div>
        <div class="tab-pane" id="tab7">
            7
        </div>