How to hide divs in Bootstrap 3 with tabs?

D

Denis Davydenko2017-09-15 16:03:36

css

Denis Davydenko, 2017-09-15 16:03:36

Good afternoon. Faced such a problem.
When the page loads, a div id="KK1" is displayed corresponding to the link "KK" . When you click on the "GU/GF" link, a div id="gugf1" appears. This part is ok.
But I can not achieve in any way that when you click on "GU / GF", and the corresponding panel appears, the "KK" panel is hidden.
Can you please tell me what should I add?
IMPORTANT: Only the standard Bootstrap and JQuery tools can be used.

<body>
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">Объект Учёта</h3>
                        </div>
                        <div class="panel-body">
                            <ul class="list-group" id="myTabs">
                                <a href="#" class="list-group-item">Создание</a>
                                <ul>
                                    <li><a data-toggle="tab" href="#KK1">КК</a></li>
                                    <li><a data-toggle="tab" href="#gugf1">ГУ/ГФ</a></li>
                                </ul>  
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="tab-content">
                    <div class="col-md-9">
                        <div id="KK1" class="panel panel-default tab-pane fade in active">
                            <div class="panel-heading">Статьи по теме</div>
                            <div class="panel-body">
                                <table class="table table-condensed table table-hover">
                                    <col width="30%"><col width="70%">
                                    <tr>
                                        <td><a href="#">Пункт #1 Категория #1 Статья #1</a></td>
                                        <td>Краткое описание статьи #1</td>
                                    </tr>
                                    <tr>
                                        <td><a href="#">Пункт #1 Категория #1 Статья #2</a></td>
                                        <td>Краткое описание статьи #2</td>
                                    </tr>                        
                                    <tr>
                                        <td><a href="#">Пункт #1 Категория #1 Статья #3</a></td>
                                        <td>Краткое описание статьи #3</td>
                                    </tr>                        
                                    <tr>
                                        <td><a href="#">Пункт #1 Категория #1 Статья #4</a></td>
                                        <td>Краткое описание статьи #4</td>
                                    </tr>                        
                                    <tr>
                                        <td><a href="#">Пункт #1 Категория #1 Статья #5</a></td>
                                        <td>Краткое описание статьи #5</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-9">
                        <div id="gugf1" class="panel panel-default tab-pane fade">
                            <div class="panel-heading">Статьи по теме</div>
                            <div class="panel-body">
                                <table class="table table-condensed table table-hover">
                                    <col width="30%"><col width="70%">
                                    <tr>
                                        <td><a href="#">Пункт #1 Категория #2 Статья #1</a></td>
                                        <td>Краткое описание статьи #1</td>
                                    </tr>
                                    <tr>
                                        <td><a href="#">Пункт #1 Категория #2 Статья #2</a></td>
                                        <td>Краткое описание статьи #2</td>
                                    </tr>                        
                                    <tr>
                                        <td><a href="#">Пункт #1 Категория #2 Статья #3</a></td>
                                        <td>Краткое описание статьи #3</td>
                                    </tr>                        
                                    <tr>
                                        <td><a href="#">Пункт #1 Категория #2 Статья #4</a></td>
                                        <td>Краткое описание статьи #4</td>
                                    </tr>                        
                                    <tr>
                                        <td><a href="#">Пункт #1 Категория #2 Статья #5</a></td>
                                        <td>Краткое описание статьи #5</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Andrew, 2017-09-15
@GooseTheDestroyer

This is not Bootstrap

<ul class="list-group" id="myTabs">
                                <a href="#" class="list-group-item">Создание</a>
                                <ul>
                                    <li><a data-toggle="tab" href="#KK1">КК</a></li>
                                    <li><a data-toggle="tab" href="#gugf1">ГУ/ГФ</a></li>
                                </ul>  
                            </ul>

Not right

<div class="tab-content">
                    <div class="col-md-9">
                          <div id="KK1" class="panel panel-default tab-pane fade in active">

It should be like this

<div class="col-md-9">
       <div class="tab-content">
                  <div id="KK1" class="panel panel-default tab-pane fade in active">
                  </div>
                   <div id="gugf1" class="panel panel-default tab-pane fade">
       </div>
</div>