Accordion does not change the icon

Asked

Viewed 41 times

0

I’m testing . toggleClass, but in this accordion, it’s not changing the icon from more to less when you click on the element:

function toggleIcon(e) {
    $(e.target)
        .prev('.panel-heading')
        .find(".more-less")
        .toggleClass('fa fa-plus fa fa-minus');
}
$('.panel-group').on('hidden.bs.collapse', toggleIcon);
$('.panel-group').on('shown.bs.collapse', toggleIcon);	
.panel-group .panel {
  border-radius: 0;
  box-shadow: none;
  border-color: #EEEEEE;
}

.panel-default>.panel-heading {
  padding: 0;
  border-radius: 0;
  color: #212121;
  /* background-color: #FAFAFA;
        border-color: #EEEEEE; */
}

.panel-title {
  font-family: Roboto-Medium;
  font-size: 20px;
  color: #3d438b;
}

.panel-title>a {
  display: block;
  padding: 15px;
  text-decoration: none;
  line-height: 22px;
  height: 74px;
}

.1_linha {}

.2_linha {}

.panel-title>a:hover,
.panel-title>a:focus {
  color: #3d438b;
}

.more-less {
  float: left;
  color: #212121;
}

.panel-default>.panel-heading+.panel-collapse>.panel-body {
  margin-bottom: 10px;
  border: 1px solid #a6abd4;
}

.panel.panel-default {
  background-color: #a6abd4;
  border: 1px solid #a6abd4;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  margin-bottom: 10px;
}


/* ----- v CAN BE DELETED v ----- */

.demo {
  padding-top: 60px;
  padding-bottom: 60px;
}

.icones_accordion::before {
  background-color: #3d438b;
  left: 0px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  display: inline-block;
  font-weight: normal;
  top: 0;
  text-align: center;
  color: #ffffff;
  margin-right: 15px;
  border-radius: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<div class="container demo">


  <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 1_linha">
          <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            <i class="icones_accordion more-less fa fa-plus"></i> Pesquisa de rearranjo envolvendo o gene MALT
          </a>
        </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse show" role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body detalhes_icones">
          <span>Utilidade</span>:<br /> Diagnóstico de linfoma MALT.<br /><br />

          <span>Material Requerido</span>:<br /> Tecido fixado em formalina e incluído em parafina (bloco de parafina) com neoplasia linfoide representada. Cópia do relatório do patologista.<br /><br />

          <span>Metodologia</span>:<br /> Utiliza sondas de DNA dirigidas a sequências específicas do MALT1 e marcadas com moléculas fluorescentes.<br /><br />

          <span>Transporte</span>:<br /> Pelo correio em temperatura ambiente (20-25ºC)<br /><br />

          <span>Prazo De Entrega</span>:<br /> 7-10 dias úteis.<br /><br />
        </div>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingTwo">
        <h4 class="panel-title 1_linha">
          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            <i class="icones_accordion more-less fa fa-plus"></i> Pesquisa de rearranjo envolvendo o gene BCL2
          </a>
        </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
        <div class="panel-body detalhes_icones">
          Simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
        </div>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingThree">
        <h4 class="panel-title">
          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree" class="
					">
            <i class="icones_accordion more-less fa fa-plus"></i> Pesquisa de amplificação do gene N-MYC - Neuroblastoma
          </a>
        </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
        <div class="panel-body detalhes_icones">
          Simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
        </div>
      </div>
    </div>









    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="heading4">
        <h4 class="panel-title">
          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse4" aria-expanded="false" aria-controls="collapse4">
            <i class="icones_accordion more-less fa fa-plus"></i> Pesquisa de amplificação do gene EGFR (HER1)- Câncer de pulmão
          </a>
        </h4>
      </div>
      <div id="collapse4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading4">
        <div class="panel-body detalhes_icones">
          Simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
        </div>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="heading5">
        <h4 class="panel-title">
          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse5" aria-expanded="false" aria-controls="collapse5">
            <i class="icones_accordion more-less fa fa-plus"></i> Pesquisa de amplificação do gene HER2 - Câncer de mama e gástrico
          </a>
        </h4>
      </div>
      <div id="collapse5" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading5">
        <div class="panel-body detalhes_icones">
          Simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
        </div>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="heading6">
        <h4 class="panel-title">
          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse6" aria-expanded="false" aria-controls="collapse6">
            <i class="icones_accordion more-less fa fa-plus"></i> Pesquisa de deleções envolvendo os cromossomos 1p e 19q- glioma/oligodendroglioma
          </a>
        </h4>
      </div>
      <div id="collapse6" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading6">
        <div class="panel-body detalhes_icones">
          Simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
        </div>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="heading7">
        <h4 class="panel-title">
          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse7" aria-expanded="false" aria-controls="collapse7">
            <i class="icones_accordion more-less fa fa-plus"></i> Pesquisa de rearranjos envolvendo o gene EWS- sarcoma de Ewing/PNET
          </a>
        </h4>
      </div>
      <div id="collapse7" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading7">
        <div class="panel-body detalhes_icones">
          Simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
        </div>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="heading8">
        <h4 class="panel-title">
          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse8" aria-expanded="false" aria-controls="collapse8">
            <i class="icones_accordion more-less fa fa-plus"></i> Pesquisa de rearranjos envolvendo o gene SYT ou SS18- sarcoma sinovial
          </a>
        </h4>
      </div>
      <div id="collapse8" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading8">
        <div class="panel-body detalhes_icones">
          Simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
        </div>
      </div>
    </div>
  </div>
  <!-- panel-group -->
</div>
<!-- container -->

Apparently it’s all right, but here was a mistake that did not take place.

1 answer

1


Bootstrap Collapse requires jQuery version 1.9.0 or higher.

Now, as the first panel starts already open, change its icon to fa-minus.

See in operation:

function toggleIcon(e){
   $(e.target)
   .prev('.panel-heading')
   .find(".more-less")
   .toggleClass('fa fa-plus fa fa-minus');
}
$('.panel-group').on('hidden.bs.collapse', toggleIcon);
$('.panel-group').on('shown.bs.collapse', toggleIcon);
.panel-group .panel {
  border-radius: 0;
  box-shadow: none;
  border-color: #EEEEEE;
}

.panel-default>.panel-heading {
  padding: 0;
  border-radius: 0;
  color: #212121;
  /* background-color: #FAFAFA;
        border-color: #EEEEEE; */
}

.panel-title {
  font-family: Roboto-Medium;
  font-size: 20px;
  color: #3d438b;
}

.panel-title>a {
  display: block;
  padding: 15px;
  text-decoration: none;
  line-height: 22px;
  height: 74px;
}

.1_linha {}

.2_linha {}

.panel-title>a:hover,
.panel-title>a:focus {
  color: #3d438b;
}

.more-less {
  float: left;
  color: #212121;
}

.panel-default>.panel-heading+.panel-collapse>.panel-body {
  margin-bottom: 10px;
  border: 1px solid #a6abd4;
}

.panel.panel-default {
  background-color: #a6abd4;
  border: 1px solid #a6abd4;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  margin-bottom: 10px;
}


/* ----- v CAN BE DELETED v ----- */

.demo {
  padding-top: 60px;
  padding-bottom: 60px;
}

.icones_accordion::before {
  background-color: #3d438b;
  left: 0px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  display: inline-block;
  font-weight: normal;
  top: 0;
  text-align: center;
  color: #ffffff;
  margin-right: 15px;
  border-radius: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<div class="container demo">


  <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 1_linha">
          <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            <i class="icones_accordion more-less fa fa-minus"></i> Pesquisa de rearranjo envolvendo o gene MALT
          </a>
        </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse show" role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body detalhes_icones">
          <span>Utilidade</span>:<br /> Diagnóstico de linfoma MALT.<br /><br />

          <span>Material Requerido</span>:<br /> Tecido fixado em formalina e incluído em parafina (bloco de parafina) com neoplasia linfoide representada. Cópia do relatório do patologista.<br /><br />

          <span>Metodologia</span>:<br /> Utiliza sondas de DNA dirigidas a sequências específicas do MALT1 e marcadas com moléculas fluorescentes.<br /><br />

          <span>Transporte</span>:<br /> Pelo correio em temperatura ambiente (20-25ºC)<br /><br />

          <span>Prazo De Entrega</span>:<br /> 7-10 dias úteis.<br /><br />
        </div>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingTwo">
        <h4 class="panel-title 1_linha">
          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            <i class="icones_accordion more-less fa fa-plus"></i> Pesquisa de rearranjo envolvendo o gene BCL2
          </a>
        </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
        <div class="panel-body detalhes_icones">
          Simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
        </div>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingThree">
        <h4 class="panel-title">
          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree" class="
					">
            <i class="icones_accordion more-less fa fa-plus"></i> Pesquisa de amplificação do gene N-MYC - Neuroblastoma
          </a>
        </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
        <div class="panel-body detalhes_icones">
          Simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
        </div>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="heading4">
        <h4 class="panel-title">
          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse4" aria-expanded="false" aria-controls="collapse4">
            <i class="icones_accordion more-less fa fa-plus"></i> Pesquisa de amplificação do gene EGFR (HER1)- Câncer de pulmão
          </a>
        </h4>
      </div>
      <div id="collapse4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading4">
        <div class="panel-body detalhes_icones">
          Simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
        </div>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="heading5">
        <h4 class="panel-title">
          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse5" aria-expanded="false" aria-controls="collapse5">
            <i class="icones_accordion more-less fa fa-plus"></i> Pesquisa de amplificação do gene HER2 - Câncer de mama e gástrico
          </a>
        </h4>
      </div>
      <div id="collapse5" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading5">
        <div class="panel-body detalhes_icones">
          Simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
        </div>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="heading6">
        <h4 class="panel-title">
          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse6" aria-expanded="false" aria-controls="collapse6">
            <i class="icones_accordion more-less fa fa-plus"></i> Pesquisa de deleções envolvendo os cromossomos 1p e 19q- glioma/oligodendroglioma
          </a>
        </h4>
      </div>
      <div id="collapse6" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading6">
        <div class="panel-body detalhes_icones">
          Simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
        </div>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="heading7">
        <h4 class="panel-title">
          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse7" aria-expanded="false" aria-controls="collapse7">
            <i class="icones_accordion more-less fa fa-plus"></i> Pesquisa de rearranjos envolvendo o gene EWS- sarcoma de Ewing/PNET
          </a>
        </h4>
      </div>
      <div id="collapse7" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading7">
        <div class="panel-body detalhes_icones">
          Simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
        </div>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="heading8">
        <h4 class="panel-title">
          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse8" aria-expanded="false" aria-controls="collapse8">
            <i class="icones_accordion more-less fa fa-plus"></i> Pesquisa de rearranjos envolvendo o gene SYT ou SS18- sarcoma sinovial
          </a>
        </h4>
      </div>
      <div id="collapse8" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading8">
        <div class="panel-body detalhes_icones">
          Simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
        </div>
      </div>
    </div>
  </div>
  <!-- panel-group -->
</div>
<!-- container -->

Browser other questions tagged

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