Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Collapse - Ao abrir o html, os <p> já ficam à amostra

Pergunta, sempre que eu dou Refresh ou abro o meu arquivo html, os parágrafos já ficam á amostra(eles deveriam ficar 'escondidos' e quando clico, eles aparecem), dai eu tenho que clicar para fecha-los. Segue meu código:

<div class="container">
            <h2>Lorem ipsum</h2>
            <img class="img-responsive" src="img/empresa.jpg" alt="">
            <!-- paineis -->
            <div id="paineis-1" class="panel-group">
                <div class="panel panel-default">
                    <div class="panel-heading" data-toggle="collapse" data-target="#1-primeiro-p" data-parent="#paineis-1">
                        <h3 class="panel-title">Lorem ipsum</h3>
                    </div><!-- Fecha panel-heading -->
                    <div id="1-primeiro-p" class="collapse in">
                        <div class="panel-body">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta purus nibh, ac ornare nibh vehicula vel. Proin ultricies est.</p>    
                        </div><!-- Fecha panel-body -->
                    </div><!-- Fecha 1-primeiro-p -->
                </div><!-- Fecha panel panel-default -->
                <div class="panel panel-default">
                    <div class="panel-heading" data-toggle="collapse" data-target="#1-segundo-p" data-parent="#paineis-1">
                        <h3 class="panel-title">Lorem ipsum</h3>
                    </div><!-- Fecha panel-heading -->
                <div id="1-segundo-p" class="collapse in">
                        <div class="panel-body">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta purus nibh, ac ornare nibh vehicula vel. Proin ultricies est.</p>
                        </div><!-- Fecha panel-body -->
                </div><!-- Fecha 1-segundo-p -->
                </div><!-- Fecha panel panel-default -->
                <div class="panel panel-default">
                    <div class="panel-heading" data-toggle="collapse" data-target="#1-terceiro-p" data-parent="#paineis-1">
                        <h3 class="panel-title">Lorem ipsum</h3>
                    </div><!-- Fecha panel-heading -->
                    <div id="1-terceiro-p" class="collapse in">
                        <div class="panel-body">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta purus nibh, ac ornare nibh vehicula vel. Proin ultricies est.</p>
                        </div><!-- Fecha panel-body -->
                    </div><!-- Fecha 1-terceiro-p -->
                </div><!-- Fecha panel panel-default -->
            </div><!--Fecha panel-group -->
        </div><!-- Fecha container-->
        <script src="jquery/jquery.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>

Não sei se fiz algo de errado... Se alguém puder me ajudar e explicar o que acontece, fico agradecido! Desde já agradeço! Obrigado. :D

3 respostas

você pode usar um js OU mudar o css para iniciar com p:hidden.

Assim ele inicializa já escondido.

solução!

Olá Rafael,

A solução é mais simples do que você imagina.

É que onde você colocou <div id="1-primeiro-p" class="collapse in"> na verdade a classdeve ter o valor de collapse apenas. Ficaria algo como:

<div id="1-primeiro-p" class="collapse">

Só isso!

'Brigadão' galera. Vocês são 'Top'! :D

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software