Keep only one panel open on the Accordion Bootstrap3

Asked

Viewed 558 times

1

Hello, I would like help to write a code . JS to repair this error on accordion Bootstrap3.

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

follows code . 

<!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>

<!-- Latest compiled JavaScript -->
<script src="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

  • Do not use irrelevant or incorrect tags, do not use high box without need, use the correct markup to format the question, read Help and Tour.

  • You could put only the really relevant snippet to facilitate

2 answers

1

This is the correct way available in the documentation of Bootstrap

<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>

  • Thank you, :) it was my first attempt the example of documentation , but there must be some conflict in the Jquerry versions that make it impossible to fully function.

0

I had the same problem, and if I understand your question correctly I think this code can help 

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

Browser other questions tagged css twitter-bootstrap

You are not signed in. Login or sign up in order to post.