Zagnieżdżanie nav pills w bootstrapie

Question

Witam,

mam pytane, czy ktoś wie, w jaki sposób można zagnieżdżać nav pills w bootstrapie?

Przykładowo: mam raz segmenty, które są nav pills i one otwierają tab content każdej opcji. I opcje są nav pills dla divów z informacjami o nich. I jak to zrobić, żeby buttony z opcjami można było klikać wielokrotnie i aby wielokrotnie wyświetlały swój tab-content z informacjami?

Bo mi działa, ale tylko przy jednokrotnym kliknięciu. Tzn. żeby ponownie naciśnięty nav pills wyświetlił zawartość, muszę odświeżyć stronę, a podejrzewam, że jest jakieś na to rozwiązanie.

Oto kod przykładowy:

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <ul class="nav nav-pills center center-text">
        <p><li class="center center-text"><a href="#A" class="center center-text middle" data-toggle="tab">Grupa A</a></li></p>
        <p><li class="center center-text"><a href="#B" class="center center-text middle" data-toggle="tab">Grupa B</a></li></p>
        <p><li class="center center-text"><a href="#C" class="center center-text middle" data-toggle="tab">Grupa C</a></li></p>
    </ul>
</div>
 
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <ul class="nav nav-pills center center-text">
        <div class="tab-content">
            <div class="tab-pane fade in col-xs-12 col-sm-12 col-md-12 col-lg-12" id="A">
                <p><li class="center center-text"><a href="#1" class="center center-text middle" data-toggle="tab">Opcja 1</a></li></p>
            </div>
 
            <div class="tab-pane fade in col-xs-12 col-sm-12 col-md-12 col-lg-12" id="B">
                    <p><li class="center center-text"><a href="#2" class="center center-text middle" data-toggle="tab">Opcja 2</a></li></p>
               </div>
 
            <div class="tab-pane fade in col-xs-12 col-sm-12 col-md-12 col-lg-12" id="C">                 
                <p><li class="center center-text"><a href="#4" class="center center-text middle" data-toggle="tab">Opcja 3</a></li></p>
                <p><li class="center center-text"><a href="#3" class="center center-text middle" data-toggle="tab">Opcja 4</a></li>
            </div>
        </div>
    </ul>
</div>
 
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">  
    <div class="tab-content">
        <div class="tab-pane fade in active" id="1">
            <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 center center-text">  
                <img src="" alt="" class="img-responsive"/>
            </div>  
        </div>                             
    </div>
 
    <div class="tab-content">
        <div class="tab-pane fade in active" id="2">
            <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 center center-text">  
                <img src="" alt="" class="img-responsive"/>
            </div>  
        </div>                             
    </div>
 
    <div class="tab-content">
        <div class="tab-pane fade in active" id="3">
            <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 center center-text">  
                <img src="" alt="" class="img-responsive"/>
            </div>  
        </div>                             
    </div>
 
    <div class="tab-content">
        <div class="tab-pane fade in active" id="4">
            <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 center center-text">  
                <img src="" alt="" class="img-responsive"/>
            </div>  
        </div>                             
    </div>
 
</div>