2

Gente, a situação é a seguinte: eu tenho 04 links que ao clicar em um deles um collapse surge e apresenta seu respectivo conteúdo. Até aí tudo bem, o problema se dá no momento de exibir estes conteúdos. Atualmente, se eu abrir um collapse e em seguida abrir um outro, o anterior não fecha. O que quero é justamente é fechar um collapse quando eu abrir um outro. Alguém pode dar uma luz!? =)

Abaixo a marcação que fiz utilizando Bootstrap 3:

<!-- LINKS QUE DISPARAM OS COLLAPSES-->
<div class="col-xs-12 col-sm-12 col-md-3 servicos">
    <a href="javascript:;" class="item-servicos " data-toggle="collapse" data- target="#collapseServico" data-parent="#collapseServico" aria-expanded="false" aria-controls="">
        <div class="icon">
            <i class="lnr lnr-laptop-phone"></i>
        </div>
        <p>SITES, PORTAIS E APLICATIVOS MOBILE</p>
    </a>
    <p>
        Ambientes digitais dimensionados para cada marca, respeitando os padrões de navegabilidade e acessibilidade, com foco no comportamento das pessoas.
    </p>
</div>



<!-- CONTEÚDOS DOS COLLAPSES-->
<div class="collapse" id="collapseServico">
    <div class="well conteudo-collapse">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-6">

                    <a href="javascript:;" class="esc" data-toggle="collapse" data-target="#collapseServico"><i class="lnr lnr-cross-circle"></i></a>
                    <header>
                        <h1 class="cor-preta">O que fazemos<span class="cor-ouro">Sites, portais e aplicativos mobile</span></h1>
                        <p>Ambientes digitais dimensionados para cada marca, respeitando os padrões de navegabilidade e acessibilidade, com foco no comportamento das pessoas. O objetivo aqui é fortalecer a identidade com o máximo de performance.</p>
                    </header>
                </div>

                <div class="col-xs-12 col-sm-6 col-md-6">
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/images/img-collapse01.png" alt="UN Digital" class="img-rounded img-responsive">
                </div>
            </div>
        </div>
    </div>
</div>

<div class="collapse" id="collapseServico2">
    <div class="well conteudo-collapse">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-6">

                    <a href="javascript:;" class="esc" data-toggle="collapse" data-target="#collapseServico2"><i class="lnr lnr-cross-circle"></i></a>
                    <header>
                        <h1 class="cor-preta">Sistemas Online e<span class="cor-ouro">e-Commerce</span></h1>
                        <p>Buscar a solução mais inteligente, seja para integrar sistemas ou para combinar estratégias de vendas.</p>
                    </header>
                </div>

                <div class="col-xs-12 col-sm-6 col-md-6">
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/images/img-collapse01.png" alt="UN Digital" class="img-rounded img-responsive">
                </div>
            </div>
        </div>
    </div>
</div>
1

1 Resposta 1

4

consegui resolver! Para que os collapses abram de maneira que venha esconder o outro, é só inserir a seguinte função javascritpt:

$("a").click(function() {
  $("div").removeClass('in');
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .