CODEWITHSUNDEEP
jquerycssaccordion
Sergi
Sergi

Reputation: 1240

Accordion styled list to toggle correctly

I have this accordion which is working almost correctly, if you click each item individually it does what it's supposed to do. If you click other items when one item is active however is when the bugs start to appear as I'm not sure how to proceed with toggling the states for the siblings, they do slide up correctly, but i would also like them to change back to it's original color, the .fa icon to it's original state and the border bottom to re-appear. I have an example in Codepen:

https://codepen.io/SergiOca/pen/dWexdW

 <body>

<div class="accordion-wrap">
              <div class="accordion-item">
                <p class="accordion-header"> Bordado <i class="fa fa-angle-down" aria-hidden="true"></i> </p>
              </div>
              <div class="accordion-text">
                <p> Básica y de fantasía con apliques, metálicos, flocado, purpurina, lentejuelas, bolas, brillantes… alta frecuencia, sublimación, tránsfer, láser, hueco grabado, serigrafía digital, vinilo textil. </p>
              </div>
           </div>


           <div class="accordion-wrap">
              <div class="accordion-item">
                <p class="accordion-header"> Bordado <i class="fa fa-angle-down" aria-hidden="true"></i> </p>
              </div>
              <div class="accordion-text">
                <p> Básica y de fantasía con apliques, metálicos, flocado, purpurina, lentejuelas, bolas, brillantes… alta frecuencia, sublimación, tránsfer, láser, hueco grabado, serigrafía digital, vinilo textil. </p>
              </div>
           </div>


            <div class="accordion-wrap">
              <div class="accordion-item">
                <p class="accordion-header"> Bordado <i class="fa fa-angle-down" aria-hidden="true"></i> </p>
              </div>
              <div class="accordion-text">
                <p> Básica y de fantasía con apliques, metálicos, flocado, purpurina, lentejuelas, bolas, brillantes… alta frecuencia, sublimación, tránsfer, láser, hueco grabado, serigrafía digital, vinilo textil. </p>
              </div>
           </div>


</body>



body{
  width: 50%;
  margin: 0 auto;
  padding-top: 5%;
}

.accordion-item{
  width: 100%;
  margin: 0 auto;
  cursor: pointer;
  border-bottom: 1px solid #ddba4d;
  margin-top: 30px;
}

.accordion-wrap{
    border-bottom: 1px solid #ddba4d;
}

.accordion-header{
  transition: ease-in-out 100ms;
}

.accordion-text{
  width: 100%;
  border-bottom: 1px solid #ddba4d;
  display: none;
  padding-top: 5px;
  padding-bottom: 20px;
 }

 .fa{
    transition: ease-in-out 300ms;
 }

 .rotate-fa{
    transform: rotate(180deg);
 }


 .accordion-header .fa{
    float: right;
    line-height: 35px;
 }

 .accordion-gold{
    color: #ddba4d;
 }

 .accordion-no-bar{
    border-bottom: 0;
 }


    $(".accordion-wrap").on("click", function(){   
      $(this).children().eq(1).slideToggle(300);  
      $(this).find(".accordion-header").toggleClass("accordion-gold");
      $(this).find(".fa").toggleClass("rotate-fa");

      $(".accordion-wrap .accordion-text").not($(this).children().eq(1)).slideUp(300); 
  });

Upvotes: 0

Views: 98

Answers (2)

Nimish
Nimish

Reputation: 1016

You can try this also.

/* acordion */
$(".accordion-wrap").on("click", function() {
  $(this).children().eq(1).slideToggle(300);
  $(this).children().eq(0).toggleClass("accordion-no-bar");
  $(this).find(".accordion-header").toggleClass("accordion-gold");
  $(this).find(".fa").toggleClass("rotate-fa");
  $(".accordion-wrap .accordion-text").not($(this).children().eq(1)).slideUp(300);
  $(".accordion-wrap .accordion-item").not($(this).children().eq(0)).removeClass("accordion-no-bar");
  $(this).siblings().find(".accordion-header").removeClass("accordion-gold");
});
body {
  width: 50%;
  margin: 0 auto;
  padding-top: 5%;
}

.accordion-item {
  width: 100%;
  margin: 0 auto;
  cursor: pointer;
  border-bottom: 1px solid #ddba4d;
  margin-top: 30px;
}

.accordion-header {
  transition: ease-in-out 100ms;
}

.accordion-text {
  width: 100%;
  border-bottom: 1px solid #ddba4d;
  display: none;
  padding-top: 5px;
  padding-bottom: 20px;
}

.fa {
  transition: ease-in-out 300ms;
}

.rotate-fa {
  transform: rotate(180deg);
}

.accordion-header .fa {
  float: right;
  line-height: 35px;
}

.accordion-gold {
  color: #ddba4d;
}

.accordion-no-bar {
  border-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="accordion-wrap">
    <div class="accordion-item">
      <p class="accordion-header"> Bordado <i class="fa fa-angle-down" aria-hidden="true"></i> </p>
    </div>
    <div class="accordion-text">
      <p> Básica y de fantasía con apliques, metálicos, flocado, purpurina, lentejuelas, bolas, brillantes… alta frecuencia, sublimación, tránsfer, láser, hueco grabado, serigrafía digital, vinilo textil. </p>
    </div>
  </div>
  <div class="accordion-wrap">
    <div class="accordion-item">
      <p class="accordion-header"> Bordado <i class="fa fa-angle-down" aria-hidden="true"></i> </p>
    </div>
    <div class="accordion-text">
      <p> Básica y de fantasía con apliques, metálicos, flocado, purpurina, lentejuelas, bolas, brillantes… alta frecuencia, sublimación, tránsfer, láser, hueco grabado, serigrafía digital, vinilo textil. </p>
    </div>
  </div>


  <div class="accordion-wrap">
    <div class="accordion-item">
      <p class="accordion-header"> Bordado <i class="fa fa-angle-down" aria-hidden="true"></i> </p>
    </div>
    <div class="accordion-text">
      <p> Básica y de fantasía con apliques, metálicos, flocado, purpurina, lentejuelas, bolas, brillantes… alta frecuencia, sublimación, tránsfer, láser, hueco grabado, serigrafía digital, vinilo textil. </p>
    </div>
  </div>
</body>

Upvotes: 0

magnusnn
magnusnn

Reputation: 137

Based on the codepen that you created in the first place, I've added a method that removed every other accordion-gold- classes.

So i added a line of javascript-code to your existing code:

$(this).siblings().find(".accordion-header").removeClass("accordion-gold");

And if you apply this to your code it should look something like this:

/* acordion */
$(".accordion-wrap").on("click", function(){   
    $(this).children().eq(1).slideToggle(300);  
    $(this).children().eq(0).toggleClass("accordion-no-bar");
    $(this).siblings().find(".accordion-header").removeClass("accordion-gold");
    $(this).find(".accordion-header").toggleClass("accordion-gold");
    $(this).find(".fa").toggleClass("rotate-fa");

    $(".accordion-wrap .accordion-text").not($(this).children().eq(1)).slideUp(300);
});

Hope this helps!

Upvotes: 1

Related Questions