jQuery Complicated Accordion

Question

I'm 90% there. I have an accordion module that I'm trying to finish up, but there's one piece that eludes me.

Functionality (working)

Accordion closed (default)
User clicks the bottom bar ( the "+" symbol)
Module opens
Module Open
- Top area changes to blue background
- Icon in top area turns yellow
- The "+" changes to "-"
User clicks on another accordion module
Closes the previously open module

Functionality (missing / not working as intended). When the user clicks the next module to open it up, the previously open on closes (working), however the classes are not being removed to make it go back to its default state.

I realize my jQ might not be the most optimized; so I appreciate any suggestions in that respect too.

// jQuery Plugins
$(function(){
  "use strict";
  // Accordion Section
  $('.mod-accordion-bottom').click(function(){
    $(this).removeClass('active');
    $(this).parent().find('.mod-accordion-top').removeClass('open');
    $(this).parent().find('i.fa').removeClass('active');
    $(this).find('i').addClass('fa-plus').removeClass('fa-minus');
    $('.mod-accordion-content').slideUp();


    if( $(this).prev().is(':hidden') === true ) {
      $(this).prev().slideDown('normal');
      $(this).parent().find('.mod-accordion-top').addClass('open');
      $(this).addClass('active');
      $(this).parent().find('i.fa').addClass('active');
      $(this).find('i').removeClass('fa-plus').addClass('fa-minus');
    }
  });

});

.mod-accordion-wrap {
  margin-bottom: 0.625rem; }

.mod-accordion-top {
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  background: #282c2f; }
  .mod-accordion-top.open {
    background-color: #3d61a4; }
  .mod-accordion-top-title, .mod-accordion-top-image {
    width: 50%;
    float: left;
    max-height: 10.3125rem; }
  .mod-accordion-top-title {
    text-transform: uppercase; }
    .mod-accordion-top-title-copy, .mod-accordion-top-title-icon {
      width: 100%;
      float: left; }
      @media screen and (min-width: 40em) {
        .mod-accordion-top-title-copy, .mod-accordion-top-title-icon {
          width: 48%; } }
    .mod-accordion-top-title-copy {
      margin: 20px 0 0 20px;
      padding: 0 155px 0 0; }
      @media screen and (min-width: 40em) {
        .mod-accordion-top-title-copy {
          border-right: 2px solid #fefefe; } }
    .mod-accordion-top-title-icon {
      text-align: center; }
      .mod-accordion-top-title-icon i.fa {
        margin-top: 50px; }
        .mod-accordion-top-title-icon i.fa.active {
          color: #ffee00; }

.mod-accordion-content {
  display: none;
  overflow: hidden;
  margin: 0.625rem 0; }
  .mod-accordion-content-wrap {
    overflow: hidden;
    margin-bottom: 0.625rem; }
    .mod-accordion-content-wrap:last-of-type {
      margin-bottom: 0; }
  .mod-accordion-content-title, .mod-accordion-content-copy {
    width: 100%; }
    @media screen and (min-width: 40em) {
      .mod-accordion-content-title, .mod-accordion-content-copy {
        width: 50%;
        float: left; } }
  .mod-accordion-content-copy {
    padding: 25px 35px 25px 25px;
    background-color: #3d61a4;
    text-align: center;
    min-height: 21.875rem; }
    .mod-accordion-content-copy h4, .mod-accordion-content-copy p {
      text-align: left; }
    .mod-accordion-content-copy a {
      color: #3d61a4;
      background-color: #fefefe;
      padding: 3px 0 0;
      text-align: center;
      border-radius: 50%;
      margin: 40px auto 0;
      display: block;
      width: 32px;
      height: 32px;
      -webkit-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out; }
      .mod-accordion-content-copy a:hover {
        background-color: #faa74a;
        color: #fefefe; }
  .mod-accordion-content-title {
    position: relative;
    text-transform: uppercase; }
    .mod-accordion-content-title h2 {
      padding: 20px; }
      @media screen and (min-width: 40em) {
        .mod-accordion-content-title h2 {
          margin: 20px;
          padding: 0; } }
    .mod-accordion-content-title img {
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1; }

.mod-accordion-bottom {
  background-color: #b4b6b7;
  border-radius: 0 0 8px 8px;
  padding: 10px 0;
  text-align: center; }
  .mod-accordion-bottom.active, .mod-accordion-bottom:hover {
    cursor: pointer;
    background-color: #3d61a4; }
  .mod-accordion-bottom i.fa {
    color: #3d61a4;
    background-color: #fefefe;
    padding: 8px 0 0;
    text-align: center;
    border-radius: 50%;
    margin: 0 auto;
    display: block;
    width: 32px;
    height: 32px;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    cursor: pointer; }
    .mod-accordion-bottom i.fa.fa-minus {
      color: #faa74a; }

#body-content {
  padding: 2.5rem 0;
  color: #fefefe; }
  #body-content p.lead {
    text-transform: uppercase;
    font-size: 1.9375rem;
    color: #919dc9; }
/*# sourceMappingURL=app.css.map */





            
              
                
                  Lorem Ipsums' Story
                
                
                  
                
              
              
                
              
            

            
              
                
                  Precision
                  
                
                
                  Main Precision Statement
                  Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.

                  Second Precision Statement
                  Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.

                  
                
              

              
                
                  Engineering
                  
                
                
                  Main Engineering Statement
                  Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.

                  Second Engineering Statement
                  Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.

                  
                
              

              
                
                  Development
                  
                
                
                  Main Development Statement
                  Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.

                  Second Development Statement
                  Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.

                  
                
              

              
                
                  Future Vision
                  
                
                
                  Main Future Vision Statement
                  Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.

                  Second Future Vision Statement
                  Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.

                  
                
              
            
 
            
              
            
 
          
 


            
              
                
                  Our PoCT Story
                
                
                  
                
              
              
                
              
            

            
              
                Precision
                
              
              
                Main Precision Statement
                Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.

                Second Precision Statement
                Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.

Arun P Johny · Accepted Answer

You can simplify this by adding the active class to the wrap element instead of adding it to each and every element. This will help us to simplify the script

// jQuery Plugins
$(function() {
  "use strict";
  // Accordion Section
  $('.mod-accordion-bottom').click(function() {
    var $wrap = $(this).closest('.mod-accordion-wrap').toggleClass('active'),
      active = $wrap.hasClass('active');
    $wrap.find('.mod-accordion-bottom i').toggleClass('fa-minus', active).toggleClass('fa-plus', !active);
    $wrap.find('.mod-accordion-content')[active ? 'slideDown' : 'slideUp']('normal');

    if (active) {
      var $other = $('.mod-accordion-wrap.active').not($wrap).removeClass('active');
      $other.find('.mod-accordion-content').slideUp();
      $other.find('.mod-accordion-bottom i').removeClass('fa-minus').addClass('fa-plus');
    }
  });

});

.mod-accordion-wrap {
  margin-bottom: 0.625rem;
}
.mod-accordion-top {
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  background: #282c2f;
}
.mod-accordion-top.open {
  background-color: #3d61a4;
}
.mod-accordion-top-title,
.mod-accordion-top-image {
  width: 50%;
  float: left;
  max-height: 10.3125rem;
}
.mod-accordion-top-title {
  text-transform: uppercase;
}
.mod-accordion-top-title-copy,
.mod-accordion-top-title-icon {
  width: 100%;
  float: left;
}
@media screen and (min-width: 40em) {
  .mod-accordion-top-title-copy,
  .mod-accordion-top-title-icon {
    width: 48%;
  }
}
.mod-accordion-top-title-copy {
  margin: 20px 0 0 20px;
  padding: 0 155px 0 0;
}
@media screen and (min-width: 40em) {
  .mod-accordion-top-title-copy {
    border-right: 2px solid #fefefe;
  }
}
.mod-accordion-top-title-icon {
  text-align: center;
}
.mod-accordion-top-title-icon i.fa {
  margin-top: 50px;
}
.mod-accordion-wrap.active .mod-accordion-top-title-icon i.fa {
  color: #ffee00;
}
.mod-accordion-content {
  display: none;
  overflow: hidden;
  margin: 0.625rem 0;
}
.mod-accordion-content-wrap {
  overflow: hidden;
  margin-bottom: 0.625rem;
}
.mod-accordion-content-wrap:last-of-type {
  margin-bottom: 0;
}
.mod-accordion-content-title,
.mod-accordion-content-copy {
  width: 100%;
}
@media screen and (min-width: 40em) {
  .mod-accordion-content-title,
  .mod-accordion-content-copy {
    width: 50%;
    float: left;
  }
}
.mod-accordion-content-copy {
  padding: 25px 35px 25px 25px;
  background-color: #3d61a4;
  text-align: center;
  min-height: 21.875rem;
}
.mod-accordion-content-copy h4,
.mod-accordion-content-copy p {
  text-align: left;
}
.mod-accordion-content-copy a {
  color: #3d61a4;
  background-color: #fefefe;
  padding: 3px 0 0;
  text-align: center;
  border-radius: 50%;
  margin: 40px auto 0;
  display: block;
  width: 32px;
  height: 32px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.mod-accordion-content-copy a:hover {
  background-color: #faa74a;
  color: #fefefe;
}
.mod-accordion-content-title {
  position: relative;
  text-transform: uppercase;
}
.mod-accordion-content-title h2 {
  padding: 20px;
}
@media screen and (min-width: 40em) {
  .mod-accordion-content-title h2 {
    margin: 20px;
    padding: 0;
  }
}
.mod-accordion-content-title img {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.mod-accordion-bottom {
  background-color: #b4b6b7;
  border-radius: 0 0 8px 8px;
  padding: 10px 0;
  text-align: center;
}
.mod-accordion-wrap.active .mod-accordion-bottom,
.mod-accordion-bottom:hover {
  cursor: pointer;
  background-color: #3d61a4;
}
.mod-accordion-bottom i.fa {
  color: #3d61a4;
  background-color: #fefefe;
  padding: 8px 0 0;
  text-align: center;
  border-radius: 50%;
  margin: 0 auto;
  display: block;
  width: 32px;
  height: 32px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}
.mod-accordion-bottom i.fa.fa-minus {
  color: #faa74a;
}
#body-content {
  padding: 2.5rem 0;
  color: #fefefe;
}
#body-content p.lead {
  text-transform: uppercase;
  font-size: 1.9375rem;
  color: #919dc9;
}
/*# sourceMappingURL=app.css.map */





  
    
      
        Lorem Ipsums' Story
      
      
        
      
    
    
      
    
  
  
  
    
      
        Precision
        
      
      
        Main Precision Statement
        Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.

        Second Precision Statement
        Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.

        
      
    

    
      
        Engineering
        
      
      
        Main Engineering Statement
        Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.

        Second Engineering Statement
        Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.

        
      
    

    
      
        Development
        
      
      
        Main Development Statement
        Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.

        Second Development Statement
        Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.

        
      
    

    
      
        Future Vision
        
      
      
        Main Future Vision Statement
        Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.

        Second Future Vision Statement
        Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.

        
      
    
  
  
  
    
  
  




  
    
      
        Our PoCT Story
      
      
        
      
    
    
      
    
  
  
  
    
      Precision
      
    
    
      Main Precision Statement
      Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.

      Second Precision Statement
      Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.

jQuery Complicated Accordion

Answers (1)

Related Questions