Accordian selected dt не работает должным образом

Question

Аккордеон работает в основном отлично, но выбранный цвет фона отображается неправильно.

, пожалуйста, помогите, как исправить.

\t jQuery('.accordion dt').click(function() { 
 
\t  jQuery(this).toggleClass('close').closest('dt').next() 
 
\t  .slideToggle().siblings('.accordion_content').slideUp(); 
 
\t }); 
 
\t jQuery('.accordion_content').hide();

.accordion dt {border-bottom: 1px solid #fff;display: block;cursor: pointer;padding: 8px 12px;color: #404549;font-size:19px;} 
 
.accordion dt .accordion_icon {float: right;} 
 
.accordion dt{background: url(../images/open.png) no-repeat 98% center #e3eaf0;} 
 
.accordion dt:nth-child(4n+1){background-color: #d7e0e7;} 
 
.accordion dt.close{background: url(../images/close.png) #005baa no-repeat 98% center;color:#fff;} 
 
.accordion_content {margin: 0;padding: 15px;} 
 
.accordion dd p{font-size: 14px;line-height: 18px;margin-bottom: 10px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<dl class="accordion"> 
 
\t \t \t  
 
\t \t \t  <dt>Step 6<i class="open"></i></dt> 
 
\t \t \t  <dd class="accordion_content"> 
 
\t \t \t  \t <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. </p> 
 
\t \t \t  </dd> 
 

 
\t \t \t  <dt>Step 7<i class="open"></i></dt> 
 
\t \t \t  <dd class="accordion_content"> 
 
\t \t \t  \t <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. </p> 
 
\t \t \t  </dd> 
 

 

 
\t \t \t  <dt>Step 8<i class="open"></i></dt> 
 
\t \t \t  <dd class="accordion_content"> 
 
\t \t \t  \t <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. </p> 
 
\t \t \t  </dd> 
 

 
\t \t \t  <dt>Step 9<i class="open"></i></dt> 
 
\t \t \t  <dd class="accordion_content"> 
 
\t \t \t  \t <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. </p> 
 
\t \t \t  </dd> 
 

 
\t \t \t  <dt>Step 10<i class="open"></i></dt> 
 
\t \t \t  <dd class="accordion_content"> 
 
\t \t \t  \t <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. </p> 
 
\t \t \t  </dd> 
 
\t \t \t </dl>

Answer 1

Вы должны удалить .close класс от .siblings().

jQuery('.accordion_content').hide(); 
 
jQuery('.accordion dt').first().toggleClass('close').next().slideToggle(); 
 

 
jQuery('.accordion dt').click(function() { 
 
    jQuery(this).toggleClass('close').next().slideToggle().siblings('.accordion_content').slideUp(); 
 
    jQuery(this).siblings().removeClass('close'); 
 
});

.accordion dt { 
 
    border-bottom: 1px solid #fff; 
 
    display: block; 
 
    cursor: pointer; 
 
    padding: 8px 12px; 
 
    color: #404549; 
 
    font-size: 19px; 
 
} 
 
.accordion dt .accordion_icon { 
 
    float: right; 
 
} 
 
.accordion dt { 
 
    background: url(../images/open.png) no-repeat 98% center #e3eaf0; 
 
} 
 
.accordion dt:nth-child(4n+1) { 
 
    background-color: #d7e0e7; 
 
} 
 
.accordion dt.close { 
 
    background: url(../images/close.png) #005baa no-repeat 98% center; 
 
    color: #fff; 
 
} 
 
.accordion_content { 
 
    margin: 0; 
 
    padding: 15px; 
 
} 
 
.accordion dd p { 
 
    font-size: 14px; 
 
    line-height: 18px; 
 
    margin-bottom: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<dl class="accordion"> 
 

 
    <dt>Step 6<i class="open"></i></dt> 
 
    <dd class="accordion_content"> 
 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit.</p> 
 
    </dd> 
 

 
    <dt>Step 7<i class="open"></i></dt> 
 
    <dd class="accordion_content"> 
 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit.</p> 
 
    </dd> 
 

 

 
    <dt>Step 8<i class="open"></i></dt> 
 
    <dd class="accordion_content"> 
 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit.</p> 
 
    </dd> 
 

 
    <dt>Step 9<i class="open"></i></dt> 
 
    <dd class="accordion_content"> 
 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit.</p> 
 
    </dd> 
 

 
    <dt>Step 10<i class="open"></i></dt> 
 
    <dd class="accordion_content"> 
 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit.</p> 
 
    </dd> 
 
</dl>