Entrar Ainda não tem acesso?
5
respostas

utilizar data-parent

Referente ao curso Bootstrap: criação de uma single-page responsiva, no capítulo Começando a implementar o site seguindo o layout e atividade Estilizando a seção Sobre Nós

por Thyago Nunes Holanda
| 98.4k xp | 22 posts

Estou utilizando o data-parent conforme ensinado no vídeo, mas não está funcionando. Quando abro uma das divs, a anterior não fecha.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="estilos.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

    <div class="container">

        <h2>Sobre nós</h2>
        <img class = "img-fluid" src="img/empresa.jpg">

        <div id="paineis-sobre" class="card-group">    

            <div class="card">
                <div class="card-header">
                    <h3 class="card-title" data-toggle="collapse" data-target="#p1" data-parent="#paineis-sobre" >Desde 1935</h3>
                 </div>
                 <div id="p1" class="collapse">
                     <div class="card-body">        
                         <p>Desde 1935 trazendo casas, mansões e prédios lindos para o mundo.</p>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h3 class="card-title" data-toggle="collapse" data-target="#p2" data-parent="#paineis-sobre">Preços acessíveis</h3>
                </div>
                <div id="p2" class="collapse">
                    <div class="card-body">
                        <p>Preços  a partir de R$ 1000.00 </p>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h3 class="card-title" data-toggle="collapse" data-target="#p3" data-parent="#paineis-sobre">Alegria em colaborar com um mundo mais bonito</h3>
                </div>
                <div id="p3" class="collapse">
                    <div class="card-body">
                        <p>Trazendo alegria para a vida das pessoas que tem dinheiro pra gastar</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="bootstrap/js/jquery.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

</body>
</html>
5 respostas
por André Victor Ruiz Pedroso
| 2102.7k xp | 3838 posts
Moderador Analista Pleno

Olá Thyago tudo bem?

Poderia ver seu arquivo estilos.css também por gentileza.

por Thyago Nunes Holanda
| 98.4k xp | 22 posts

Nele há apenas um padding.

#paineis-sobre {
    margin-top: 20px;
}
por André Victor Ruiz Pedroso
| 2102.7k xp | 3838 posts
Moderador Analista Pleno

O professor está usando panel ao invés de card.

Eu acho que não é o caso mas tenha certeza que está usando Bootstrap 3, se usar o 4 não irá funcionar.

Segue o código testado e funcionando, espero ter ajudado!!!

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="estilos.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #paineis-sobre {
            margin-top: 20px;
        }


    </style>

</head>
<body>

    <div class="container">

        <h2>Sobre nós</h2>
        <img class = "img-fluid" src="img/empresa.jpg">

        <div class="panel-group col-sm-6" id="paineis-sobre">
            <div class="panel panel-default">
                <div class="panel-heading" data-toggle="collapse" data-target="#primeiro-paragrafo" data-parent="#paineis-sobre" aria-expanded="true">
                    <h3 class="panel-title">Desde 1935</h3>
                </div>

                <div class="collapse in" id="primeiro-paragrafo" aria-expanded="true" style="">
                    <div class="panel-body">
                        Desde 1935 trazendo casas, mansões e prédios lindos para o mundo
                    </div>
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading collapsed" data-toggle="collapse" data-target="#segundo-paragrafo" data-parent="#paineis-sobre" aria-expanded="false">
                    <h3 class="panel-title">Alegria em colaborar para um mundo mais bonito</h3>
                </div>

                <div id="segundo-paragrafo" class="collapse" aria-expanded="false" style="height: 0px;">
                    <div class="panel-body">
                        Trazendo alegria para a vida das pessoas que tem dinheiro para gastar.
                    </div>
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading collapsed" data-toggle="collapse" data-target="#terceiro-paragrafo" data-parent="#paineis-sobre" aria-expanded="false">
                    <h3 class="panel-title">Mais de 300 prêmios em design e em conforto.</h3>
                </div>

                <div id="terceiro-paragrafo" class="collapse" aria-expanded="false" style="height: 0px;">
                    <div class="panel-body">
                        Mais de 5 milhões de clientes satisfeitos em todo o mundo.
                    </div>
                </div>
            </div>
        </div>



    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


</body>
</html>
por Thyago Nunes Holanda
| 98.4k xp | 22 posts

Estou utilizando o Bootstrap 4, e segundo a documentação, o data-parent funciona da mesma forma.

por André Victor Ruiz Pedroso
| 2102.7k xp | 3838 posts
Moderador Analista Pleno

O curso é sobre Bootstrap 3, muita coisa no Bootstrap 4 não funciona no 3. Muito código do 4 não é retrocompatível com o 3.

Esse código que criei não funciona no 4, mas no 3. Porque no 4 se usa os cards enquanto no 3 ainda era os panels.

Me parece que no bootstrap 3 não tinha o aria-controls que faz o controle do que irá se colapsar. No 3 isso é automático.

Veja como ficaria o mesmo código em bootstrap 4. Porém minha recomendação é seguir o curso aprendendo com o bootstrap 3 e depois no final migrar todo código para bootstrap 4.

Mas fique a vontade para fazer da maneira mais confortável para você :-) . Qualquer coisa estamos aqui para te ajudar!!!

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="estilos.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #paineis-sobre {
            margin-top: 20px;
        }


    </style>

</head>
<body>

    <div class="container">

        <h2>Sobre nós</h2>
        <img class = "img-fluid" src="img/empresa.jpg">


        <div id="accordion">
            <div class="card">
              <div class="card-header" id="headingOne">
                <h3 class="card-title" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    Desde 1935</h3>
              </div>

              <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
                <div class="card-body">
                    Desde 1935 trazendo casas, mansões e prédios lindos para o mundo
                </div>
              </div>
            </div>
            <div class="card">
              <div class="card-header" id="headingTwo">
                <h3 class="card-title" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Alegria em colaborar para um mundo mais bonito</h3>
              </div>
              <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
                <div class="card-body">
                    Trazendo alegria para a vida das pessoas que tem dinheiro para gastar.
                </div>
              </div>
            </div>
            <div class="card">
              <div class="card-header" id="headingThree">
                <h3 class="card-title" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" >Mais de 300 prêmios em design e em conforto.</h3>
              </div>
              <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
                <div class="card-body">
                    Mais de 5 milhões de clientes satisfeitos em todo o mundo.
                </div>
              </div>
            </div>
          </div>

        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


</body>
</html>