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

Códigos diferentes co o mesmo resultado

VAI TER ALGUMA EXPLICAÇÃO PARA ISSO ? Código DIFERENTE ao vídeo :

<body>

    <section class="container">
        <h2>Sobre Nós</h2>
        <img class="img-responsive" src="img/empresa.jpg" alt="">

        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    Desde 1935
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
                A TopCasaFina Arquitetura está no mercado desde 1935 trazendo uma série de projetos de qualidade para seus clientes e mudando suas vidas para sempre.
                Nossa empresa construiu o palácio Dionísio para Don Pedro IX que ninguém nunca ouviu falar.
            </div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                    Preços acessíveis
                </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
            <div class="panel-body">
                Com projetos a partir de R$ 5.000.000,00 a nossa empresa procura abranger os clientes mais ricos do mundo.
            </div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingThree">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
                    Alegria em colaborar para um mundo mais bonito
                </a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
            <div class="panel-body">
                Os projetos da TopCasaFina Arquitetura são sempre acompanhados dos melhores profissionais de decoração para que
                o produto final fique lindo.
            </div>
        </div>
    </div>
</div>

    </section>

    <script src="jquery.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</body>

Código IGUAL do vídeo :

<body>

    <section class="container">
        <h2>Sobre Nós Working in The Project</h2>
        <img class="img-responsive" src="img/empresa.jpg" alt="">

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

                <div class="collapse in" id="primeiro-paragrafo">
                    <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" data-toggle="collapse" data-target="#segundo-paragrafo" data-parent="#paineis-sobre">
                    <h3 class="panel-title">Preços acessíveis</h3>
                </div>

                <div id="segundo-paragrafo" class="collapse">
                    <div class="panel-body">
                        Alegria para colaborar com um mundo mais bonito
                    </div>
                </div>
            </div>

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

                <div id="terceiro-paragrafo" class="collapse">
                    <div class="panel-body">
                        Trazendo alegria para a vida das pessoas que tem dinheiro para gastar.
                    </div>
                </div>
            </div>
        </div>

    </section>

    <script src="jquery.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</body>
3 respostas

Acredito que se o código esta diferente e tem o mesmo resultado, não tem nenhum problema , você apenas vai aprender outra forma de atingir o mesmo objetivo. em cima do player da aula, sempre tem uma opção de sugerir uma melhoria no conteúdo, caso você encontre algum erro no conteúdo digitado , você tem a opção de corrigir e sugerir uma melhoria para os próximos alunos.

solução!

Tem toda razão

Antônio, além de aprender a desenvolver de uma outra maneira, as ferramentas implementadas no código digitado trazem melhorias de acessibilidade, pesquise sobre o Aria e também sobre os roles e entenderá melhor.

No entanto, compartilho da decepção de isso não ter sido abordado durante a vídeo aula, nos economizaria muito tempo!

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