Esconder e abrir div

Alguém me ajuda afazer tipo uma guia que abre e esconde com um clique.

                     <div class="product-page-content">
            <div class="col-md-12">
                <ul id="myTab" class="nav nav-tabs">
                    <li id="tab-descricao" class="active"><a href="#Descricao" data-toggle="tab">Descrição</a></li>
                    <li id="tab-tecnica"><a href="#Especificao" data-toggle="tab">Informação </a></li>
                    </a></li>
                    </a></li>
                </ul>
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade in active" id="Descricao" itemprop="description">

                        <p>
                        <font size="3" face="proxima nova light" align="rigth" color="black">
                        texto
                       </p></font>

                    </div>
                    <div class="tab-pane fade" id="Especificao">
                        <table class="datasheet">
                            <tbody><tr>
                                <th colspan="2">
                                    <p>
                        <font size="3" face="proxima nova light" align="rigth" color="black">
                        texto

                        <ul>
                        <li> texto </li>
                        
                        </ul>

                       </p></font>

                                </th>
                            </tr>
                            <tr>
                                <td class="datasheet-features-type">
                            </td>
                               
                        </tbody></table>
                    </div></div></div>

                                    <hr>
                                </div>
                                 <!-- descrição -->

Aqui vai um code-pen com um código que fiz agora.

Leia as observações.

https://codepen.io/menosprezzi/pen/zNZQxR

1 curtida

Vlw cara

1 curtida