ボタンを上下反転して中央に配置します。

Question

私にはアコーディオンがあり、右に下向きの矢印があります。その矢印が180度変換され、ボタンがアクティブな場合は垂直にセンタリングされるようにしたいと思います。

ボタンの上にマウスを移動すると、「アクティブ」のクラスが与えられますが、ボタンに含まれる矢印をどのようにターゲットできますか？

var acc = document.getElementsByClassName("accordion"); 
 
var i; 
 

 
for (i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function(){ 
 
     this.classList.toggle("active"); 
 
     var panel = this.nextElementSibling; 
 
     if (panel.style.display === "block") { 
 
      panel.style.display = "none"; 
 
     } else { 
 
      panel.style.display = "block"; 
 
     } 
 
    } 
 
}

i.fa.fa-angle-down { 
 
    float: right; 
 
    padding-top: 8px; 
 
} 
 

 
button.accordion { 
 
    background-color: #eee; 
 
    color: #444; 
 
    cursor: pointer; 
 
    width: 100%; 
 
    border: none; 
 
    text-align: left; 
 
    outline: none; 
 
    font-size: 15px; 
 
    transition: 0.4s; 
 
border-radius: 0px; 
 
margin-bottom: 10px; 
 
} 
 

 
button.accordion.active, button.accordion:hover { 
 
    color: #58595b; 
 
} 
 

 
div.panel div.question:before { 
 
    content: "\0051\003a"; 
 
padding-right: 10px; 
 
display:inline-block; 
 
font-weight: 700; 
 
} 
 

 

 

 

 
div.panel { 
 
color: #77787b; 
 
transition: 0.4s; 
 
cursor: default; 
 
font-size: 16px; 
 
} 
 

 
div.panel p { 
 

 
} 
 

 
div.panel p.faq-a { 
 
padding-left: 1.7em; 
 
} 
 

 
div.panel div.question { 
 
padding-bottom: 17.5px; 
 
} 
 

 
div.panel { 
 
    padding: 0 18px; 
 
    display: none; 
 
    background-color: white; 
 
} 
 

 
div.panel div.question:hover { 
 
color: #939598 !important; 
 
} 
 

 
p.faq-q { 
 
display: inline-block; 
 
font-weight: 700; 
 
max-width: 900px; 
 
vertical-align: top; 
 
} 
 

 
#faq h2 { 
 
color: #e2231a; 
 
} 
 

 
#faq { 
 
width: 970px; 
 
margin: 0 auto; 
 
} 
 

 
p.faq-q { 
 
\t max-width: 95%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://use.fontawesome.com/ac43c2a4c5.js"></script> 
 
<h2>CHOOSE A CATEGORY</h2> 
 
<button class="accordion">fundraising<i class="fa fa-angle-down"></i></button> 
 
<div class="panel"> 
 
<div class="question"> 
 
\t <p class="faq-q">Where does the fundraising money go?</p> 
 
\t <p class="faq-a">Some text here to answer the question</p> 
 
</div>

私はアコーディオンを持っており、右に浮動下向きの矢印があります。その矢印が180度変換され、ボタンがアクティブな場合は垂直にセンタリングされるようにしたいと思います。

ボタンの上にマウスを移動すると、「アクティブ」のクラスが与えられますが、ボタンに含まれる矢印をどのようにターゲットできますか？

Answer 1

これは何か？

button.accordion.active i.fa.fa-angle-down { 
    transform: rotate(180deg); 
} 

（または、同様の方法で擬似::ターゲット要素をターゲティングできます）。

Answer 2

ここに行きます。私はフロートの代わりにフレックスにボタンの内容を変更しました。私はそれが良い選択だと思う。

var acc = document.getElementsByClassName("accordion"); 
 
var i; 
 

 
for (i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function(){ 
 
     this.classList.toggle("active"); 
 
     var panel = this.nextElementSibling; 
 
     if (panel.style.display === "block") { 
 
      panel.style.display = "none"; 
 
     } else { 
 
      panel.style.display = "block"; 
 
     } 
 
    } 
 
}

i.fa.fa-angle-down { 
 
} 
 

 
button.accordion { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
    background-color: #eee; 
 
    color: #444; 
 
    cursor: pointer; 
 
    width: 100%; 
 
    border: none; 
 
    text-align: left; 
 
    outline: none; 
 
    font-size: 15px; 
 
    transition: 0.4s; 
 
border-radius: 0px; 
 
margin-bottom: 10px; 
 
} 
 

 
button.accordion.active, button.accordion:hover { 
 
    color: #58595b; 
 
} 
 

 
div.panel div.question:before { 
 
    content: "\0051\003a"; 
 
padding-right: 10px; 
 
display:inline-block; 
 
font-weight: 700; 
 
} 
 

 

 

 

 
div.panel { 
 
color: #77787b; 
 
transition: 0.4s; 
 
cursor: default; 
 
font-size: 16px; 
 
} 
 

 
div.panel p { 
 

 
} 
 

 
div.panel p.faq-a { 
 
padding-left: 1.7em; 
 
} 
 

 
div.panel div.question { 
 
padding-bottom: 17.5px; 
 
} 
 

 
div.panel { 
 
    padding: 0 18px; 
 
    display: none; 
 
    background-color: white; 
 
} 
 

 
div.panel div.question:hover { 
 
color: #939598 !important; 
 
} 
 

 
p.faq-q { 
 
display: inline-block; 
 
font-weight: 700; 
 
max-width: 900px; 
 
vertical-align: top; 
 
} 
 

 
#faq h2 { 
 
color: #e2231a; 
 
} 
 

 
#faq { 
 
width: 970px; 
 
margin: 0 auto; 
 
} 
 

 
p.faq-q { 
 
\t max-width: 95%; 
 
} 
 

 
button.active i { 
 
transform: rotate(180deg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://use.fontawesome.com/ac43c2a4c5.js"></script> 
 
<h2>CHOOSE A CATEGORY</h2> 
 
<button class="accordion">fundraising<i class="fa fa-angle-down"></i></button> 
 
<div class="panel"> 
 
<div class="question"> 
 
\t <p class="faq-q">Where does the fundraising money go?</p> 
 
\t <p class="faq-a">Some text here to answer the question</p> 
 
</div>