Open and close a Collapse at a time

Navigation
2

People, the situation is as follows: I have 04 links that when clicking on one of them a collapse appears and presents its respective content. So far so good, the problem is in the moment of displaying these contents. Currently, if I open a collapse and then open another, the previous one does not close. What I want is to close a collapse when I open another one. Can someone give a light !? =)

Below the markup I made using 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>
    
asked by anonymous 19.11.2015 / 15:30

1 answer

3

I could solve it! In order for the collapses to open in a way that will hide the other, just enter the following javascritpt function: 

$("a").click(function() {
  $("div").removeClass('in');
});
    
19.11.2015 / 15:37
Modal Jquery does not open I can not change records from a database table