Open and close one Collapse at a time

Question

People, the situation is as follows: I have 04 links that when you click on one of them a Collapse appears and presents its respective content. So far so good, the problem is at the time of displaying these contents. Currently, if I open a Collapse and then open another one, the previous one does not close. What I want is precisely to close one Collapse when I open another. Someone can 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>

Answer 1

I managed to solve! For the collapses to open so that it comes to hide the other, just insert the following javascritpt function:

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