Keep only one open panel in Accordion Bootstrap3

Question

Keep only one open panel in Accordion Bootstrap3

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

Hello, I would like help writing a .JS code to repair this error in the Bootstrap3 accordion.

Hide the open panel when another is clicked. I'm currently getting more than one open panel, when the correct one would be just one.

code follows.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Accordion BETA </title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">



     <!--BIBLIOTECAS #BOOTSTRAP -->

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--<link href="css/bootstrap-responsive.css" rel="stylesheet">-->

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script><!--LatestcompiledJavaScript--><scriptsrc="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>




     <!-- icones bootsatrap-->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">



    <style>
        body{
            background-color: #fff !important;
        }
/*===================inicio accordion =============================*/      
.servicos-acordion  i {

    height: 0px;
    width: 0px;


}

.servicos-acordion h3 {
    opacity:1;
    color: #F15A22;
    font-size: 40px;
    opacity: inherit;
    font-weight: bold;
    padding-top:2%;
    padding-bottom: 2%;
    padding-left: 1%;

}

.servicos-acordion a {

    color: orange;
    text-decoration: none;

}
.servicos-faixa {
    background-color: rgba(0,0,0,0.8);
    background-repeat: no-repeat;
    color: #ffffff;


}

.plus img {

    margin-top:-2%;


}
.servicos-grupo{
    padding-top:1%;
    padding-bottom: 1%;
    width: 100%;
    margin: auto !important;
    clear: both;

}

.txt-acordion{
    color: #fff;
    font-size: 12px;
    padding: 1% !important;    

}

.accordion-body{
    padding: 1% !important;


}

.i-servicos img{


}


/*===================Fim accordion =============================*/


    </style>




</head>

<body>



<!--Acoordion-->
<section class=" container-fluid zero-lados">
    <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10 col-lg-offset-1 col-md-offset-1">
         <!--Inicio acordion -->
        <div class="accordion servicos-acordion servicos-grupo" id="accordion2">

      <div class="accordion-group servicos-faixa wow bounceIn">
        <div class="accordion-heading">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
            <h3>LOREM 
            <div class="plus">
            <img src="img/plus-acordion.png" alt="plus" class="pull-right hidden-xs ">
            </div>
            </h3>
          </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse ">
          <div class="accordion-inner">
             <!--Conteudo do acordion -->
              <div class="container-fluid">
              <div class="col-xs-2 i-servicos">
                    <img src="img/servicos-comunicacao-visual.png" alt="AGENCIA VPC" class="img-responsive">
              </div>
              <div class="col-xs-10">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ea deserunt quae, debitis neque dolor voluptatum ab nemo eum? Doloremque sed quibusdam veritatis sunt, suscipit asperiores itaque ducimus quia temporibus delectus ex non fugit, qui ullam esse, blanditiis alias assumenda fuga eum! Illo voluptate rem consequatur placeat nostrum iste dolor.
              </div>
          </div>
              <!-- Fim Conteudo do acordion -->

          </div>
        </div>
      </div>

      <div class="accordion-group servicos-faixa wow bounceIn">
        <div class="accordion-heading">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
            <h3>LOREM
             <div class="plus">
            <img src="img/plus-acordion.png" alt="plus" class="pull-right hidden-xs">
            </div>
            </h3> 

          </a>
        </div>
        <div id="collapseTwo" class="accordion-body collapse">
          <div class="accordion-inner">
            <!--Conteudo do acordion -->
              <div class="container-fluid">
              <div class="col-xs-2 i-servicos">
                    <img src="img/servicos-design-grafico.png" alt="AGENCIA VPC" class="img-responsive">
              </div>
              <div class="col-xs-10">
                 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit quos earum similique, odio quaerat unde quam distinctio, nisi excepturi voluptatem, delectus cupiditate neque deleniti maiores tenetur sapiente non vero. Odit error temporibus, ratione minima quis, velit culpa atque aliquid eaque laudantium qui animi ipsa totam nam rem cumque modi illo.
              </div>
              </div>
              <!-- Fim Conteudo do acordion -->

          </div>
        </div>
      </div>

      <div class="accordion-group servicos-faixa wow bounceIn">
        <div class="accordion-heading">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
           <h3> LOREM
           <div class="plus">
            <img src="img/plus-acordion.png" alt="plus" class="pull-right hidden-xs">
            </div>
           </h3>
          </a>
        </div>
        <div id="collapseThree" class="accordion-body collapse">
          <div class="accordion-inner">
            <!--Conteudo do acordion -->
              <div class="container-fluid">
              <div class="col-xs-2 i-servicos">
                    <img src="img/servicos-web-site.png" alt="AGENCIA VPC" class="img-responsive">
              </div>
              <div class="col-xs-10">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt dolorem earum accusamus quisquam laboriosam. Dolor explicabo quo pariatur reiciendis cumque aliquam ipsam odio hic ipsum minus id corrupti quaerat, nulla dolores, dolorum ea dolore cum dicta accusantium obcaecati, placeat dolorem doloribus amet praesentium. Distinctio quae accusantium facere animi, a atque?
              </div>
          </div>
              <!-- Fim Conteudo do acordion -->

          </div>
        </div>
      </div>

      <div class="accordion-group servicos-faixa wow bounceInLeft">
        <div class="accordion-heading">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">
           <h3>LOREM <div class="plus">
            <img src="img/plus-acordion.png" alt="plus" class="pull-right hidden-xs ">
            </div>
           </h3>
          </a>
        </div>
        <div id="collapseFour" class="accordion-body collapse">
          <div class="accordion-inner">
            <!--Conteudo do acordion -->
              <div class="container-fluid">
              <div class="col-xs-2 i-servicos">
                    <img src="img/servicos-campanha-publicitarias.png" alt="AGENCIA VPC" class="img-responsive">
              </div>
              <div class="col-xs-10">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos ullam nisi adipisci in qui veniam enim placeat, rem eligendi. Ut quidem excepturi, quasi voluptates est accusamus quo perspiciatis ad, itaque hic harum, voluptatem enim. Optio, corporis aspernatur quasi omnis cumque id quod dolor iure. Amet odit officia, aliquid vero. Delectus.
              </div>
          </div>
              <!-- Fim Conteudo do acordion -->

          </div>
        </div>
      </div>

      <div class="accordion-group servicos-faixa wow bounceInRight">
        <div class="accordion-heading">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFive">
            <h3>LOREM <div class="plus">
            <img src="img/plus-acordion.png" alt="plus" class="pull-right hidden-xs">
            </div>
            </h3>
          </a>
        </div>
        <div id="collapseFive" class="accordion-body collapse">
          <div class="accordion-inner">
            <!--Conteudo do acordion -->
              <div class="container-fluid">
              <div class="col-xs-2 i-servicos">
                    <img src="img/servicos-logotipo.png" alt="AGENCIA VPC" class="img-responsive">
              </div>
              <div class="col-xs-10">
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quaerat fugiat, velit nam qui eum ea suscipit corporis quasi eius minus reiciendis facere odit rem est iusto eaque omnis accusantium possimus, expedita praesentium tenetur vitae delectus? Expedita quis ab aut odit dolor perferendis, inventore repellat, veritatis adipisci numquam, eum pariatur.
              </div>
          </div>
              <!-- Fim Conteudo do acordion -->

          </div>
        </div>
      </div>

      <div class="accordion-group servicos-faixa wow bounceInLeft">
        <div class="accordion-heading">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseSix">
            <h3>LOREM 
            <div class="plus">
            <img src="img/plus-acordion.png" alt="plus" class="pull-right hidden-xs">
            </div>
            </h3>
          </a>
        </div>
        <div id="collapseSix" class="accordion-body collapse">
          <div class="accordion-inner">
        <!--Conteudo do acordion -->
              <div class="container-fluid">
              <div class="col-xs-2 i-servicos">
                    <img src="img/servicos-impressao-digital.png" alt="AGENCIA VPC" class="img-responsive">
              </div>
              <div class="col-xs-10">
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum vitae, quo, suscipit ea repellendus temporibus dolores quos reiciendis? Consequatur placeat, praesentium rerum nisi! Maxime quod eum cupiditate amet esse odio, quisquam ab aliquid dolorum, iste nihil id impedit corrupti officiis voluptates optio fugit eaque enim ex sunt non, laborum quae!
              </div>
          </div>
              <!-- Fim Conteudo do acordion -->

          </div>
        </div>
      </div>

      <div class="accordion-group servicos-faixa wow bounceInRight">
        <div class="accordion-heading">
          <a class="accordion-toggle " data-toggle="collapse" data-parent="#accordion2" href="#collapseSeven">
            <h3>LORME
            <div class="plus">
            <img src="img/plus-acordion.png" alt="plus" class="pull-right hidden-xs">
            </div>
            </h3>
          </a>
        </div>
        <div id="collapseSeven" class="accordion-body collapse">
          <div class="accordion-inner "  >
         <!--Conteudo do acordion -->
              <div class="container-fluid">
              <div class="col-xs-2 i-servicos">
                    <img src="img/servicos-identidade-visual.png" alt="AGENCIA VPC" class="img-responsive">
              </div>
              <div class="col-xs-10">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit quia recusandae dignissimos, assumenda itaque tempora pariatur distinctio, omnis, repellat, repellendus suscipit et iusto deleniti est! Eligendi quod aspernatur, perspiciatis repudiandae quidem! Vitae nihil vel harum molestiae assumenda cupiditate necessitatibus tenetur voluptas officiis, id explicabo, et numquam mollitia doloremque, a repellendus!
              </div>
          </div>
              <!-- Fim Conteudo do acordion -->

          </div>
        </div>
     </div>

    </div> 
        <!--Fim acordion -->
    </div>
</section>  



</body>
</html>

css twitter-bootstrap

asked by anonymous 14.03.2016 / 15:22

2 answers

Focus on a browser tab with JavaScript How can I create a screen with different Views for C #

score 1 · Answer 1

This is the correct way available in the Bootstrap documentation.

<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">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Texto painel 1.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Texto painel 2.
      </div>
    </div>
  </div>
</div>

score 0 · Answer 2

I had the same problem, and if I understood your question well I think this code can help

var active = true;
    $(document).on("click", ".accordion ","show.bs.collapse", function () {
        if (active)
            $(".accordion .in").collapse("hide");
    });