如果打开该dd,如何将箭头向下图标(picture1)更改为向上箭头图标(picture2)。如果单击另一个技能栏并打开其他一些dd(第一个自动关闭),则第一个图标应更改回箭头。这是箭头向上图标的类:ion-arrow-up-b。
HTML code:
<div class="containers-right">
<dl class="accordion">
<dt>
<i class="ion-arrow-down-b"></i>
<div class="skill-container desktop">
<div class="skill learning"></div>
</div>
</dt>
<dd>
<p class="accordion-text">Info about Learning skill</p>
</dd>
<dt>
<i class="ion-arrow-down-b"></i>
<div class="skill-container desktop">
<div class="skill organization">
</div>
</div>
</dt>
<dd>
<p class="accordion-text">Info about Organization skill</p>
</dd>
<dt>
<i class="ion-arrow-down-b"></i>
<div class="skill-container desktop">
<div class="skill creativity"></div>
</div>
</dt>
<dd>
<p class="accordion-text">Info about Creativity skill</p>
</dd>
<dt>
<i class="ion-arrow-down-b"></i>
<div class="skill-container desktop">
<div class="skill communication"></div>
</div>
</dt>
<dd>
<p class="accordion-text">Info about Communication skill</p>
</dd>
<dt>
<i class="ion-arrow-down-b"></i>
<div class="skill-container desktop">
<div class="skill teamwork"></div>
</div>
</dt>
<dd>
<p class="accordion-text">Info about Teamwork skill</p>
</dd>
</dl>
</div>
CSS代码:
.accordion{
width: 10em;
margin-right: 0;
}
.accordion,
.accordion dt{
margin: 0;
padding: 0;
}
.accordion dd{
margin: -0.55em 0 0.55em 0;
}
dt{
display: flex;
cursor: pointer;
}
.accordion-container{ text-align: left; }
.accordion-text{
font-size: 0.7em;
color: #4f285f;
padding: 0.5em 0 0.2em 0.5em;
}
.ion-arrow-down-b,
.ion-arrow-up-b{
color: #6a6868;
margin-left: -1em;
margin-right: 0.5em;
margin-top: -0.35em;
}
jQuery代码:
var accordion = $('.accordion');
accordion.find('dd').hide();
accordion.find('dt').on('click', function(){
$(this).toggleClass('open').next('dd').slideToggle().siblings('dd:visible').slideUp().prev('dt').removeClass('open');
});