ドロップダウン矢印ユニコードアイコン静的位置CSS小さなデバイス

Question

私はFAQ用のアコーディオンを実装しようとしています。 小さな画面の矢印アイコンに問題があるので、下矢印を押すたびに上矢印アイコンと同じ場所にあるアイコンを切り替える必要があります。しかし、の下向き矢印をクリックすると、上向き矢印が上に少し表示されます（スマートフォンの表示）。私はマージンで試しましたが、成功しませんでした私は、アイコンをクリックすることで、アイコンを切り替えるたびに、両方のアイコンを同じ場所に保持する方法を知りたいと思います。

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

 
for (i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function(){ 
 
     /* Toggle between adding and removing the "active" class, 
 
     to highlight the button that controls the panel */ 
 
     this.classList.toggle("active"); 
 

 
     /* Toggle between hiding and showing the active panel */ 
 
     var panel = this.nextElementSibling; 
 
     if (panel.style.maxHeight) { 
 
      panel.style.maxHeight = null; 
 
     } else { 
 
      panel.style.maxHeight = panel.scrollHeight + "px"; 
 
     } 
 
    } 
 
}

button.accordion { 
 

 
    background-color: #eee; 
 
    color: #444; 
 
    cursor: pointer; 
 
    padding: 18px; 
 
    width: 100%; 
 
    text-align: center; 
 
    border: none; 
 
    outline: none; 
 
    transition: 0.4s; 
 
    font-size: 18px; 
 
} 
 

 
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */ 
 

 
button.accordion.active, button.accordion:hover { 
 
    background-color: #ccc; 
 
} 
 

 
/* Style the accordion panel. Note: hidden by default */ 
 

 
div.panel { 
 
    padding: 0 18px; 
 
    background-color: white; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: max-height 0.4s ease-out; 
 
} 
 

 
button.accordion:after { 
 

 
    font-family: 'Arial Unicode MS', 'Consolas'; 
 
    content: "\2304"; 
 

 
    font-size: 60px !important; 
 
    color: #777; 
 
    float: left; 
 
    margin-left: 5px; 
 
    margin-top: -3vh ; 
 
} 
 

 
button.accordion.active:after { 
 
    content: "\2303"; 
 
    max-height: 1vh; 
 

 

 
}

<div class="container"> 
 
    <button type="button" class="accordion">First Question</button> 
 
    <div class="panel"> 
 
     <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. </p> 
 
    </div> 
 

 
    <button type="button" class="accordion">Second Question</button> 
 
    <div class="panel"> 
 
     <p>This is the answer to question #1. Pellentesque habitant morbi....</p> 
 
    </div> 
 

 
    <button type="button" class="accordion">Third Question</button> 
 
    <div class="panel"> 
 
     <p>This is the answer to question #1. Pellentesque habitant morbi....</p> 
 
    </div> 
 

 
    <button type="button" class="accordion">Fourth Question</button> 
 
    <div class="panel"> 
 
     <p>This is the answer to question #1. Pellentesque habitant morbi....</p> 
 
    </div> 
 

 
    <button type="button" class="accordion">Fifth Question</button> 
 
    <div class="panel"> 
 
     <p>This is the answer to question #1. Pellentesque habitant morbi....</p> 
 
    </div> 
 

 
    <button type="button" class="accordion">Sixth Question</button> 
 
    <div class="panel"> 
 
     <p>This is the answer to question #1. Pellentesque habitant morbi....</p> 
 
    </div> 
 
    </div>

Answer 1

私は（アクティブかどうか）、ボタンの状態に応じてそれを変更し、その後、背景画像としての矢印を設定します、あなたが好きなように、あなたは画像を配置することができます。元の状態にあるときだけ背景位置を使用することに注意してください。

.accordion{ 
    background-image: url("down arrow"); //path to image 
    background-position: right center; //edit depending on your needs 
    } 
    .accordion.active{ 
    background-image: url("up arrow"); //path to image 
    } 

Answer 2

。この方法を試してください。それは動作します

button.accordion{ 
position:relative; 
} 

button.accordion::after{ 
position: absolute; 
left: 30px; 
top: -16px; 
} 

Answer 3

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

 
    for (i = 0; i < acc.length; i++) { 
 
     acc[i].onclick = function(){ 
 
      /* Toggle between adding and removing the "active" class, 
 
      to highlight the button that controls the panel */ 
 
      this.classList.toggle("active"); 
 

 
      /* Toggle between hiding and showing the active panel */ 
 
      var panel = this.nextElementSibling; 
 
      if (panel.style.maxHeight) { 
 
       panel.style.maxHeight = null; 
 
      } else { 
 
       panel.style.maxHeight = panel.scrollHeight + "px"; 
 
      } 
 
     } 
 
    }

button.accordion { 
 

 
     background-color: #eee; 
 
     color: #444; 
 
     cursor: pointer; 
 
     padding: 18px; 
 
     width: 100%; 
 
     text-align: center; 
 
     border: none; 
 
     outline: none; 
 
     transition: 0.4s; 
 
     font-size: 18px; 
 
     position: relative; 
 
    } 
 
    .panel p{ 
 
     margin: 0; 
 
     padding:10px; 
 
    } 
 

 
    /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */ 
 

 
    button.accordion.active, button.accordion:hover { 
 
     background-color: #ccc; 
 
    } 
 

 
    /* Style the accordion panel. Note: hidden by default */ 
 

 
    div.panel { 
 
     padding: 0 18px; 
 
     background-color: white; 
 
     max-height: 0; 
 
     overflow: hidden; 
 
     transition: max-height 0.4s ease-out; 
 
    } 
 

 
    button.accordion:after { 
 

 
     font-family: 'Arial Unicode MS', 'Consolas'; 
 
     content: "\2304"; 
 

 
     font-size: 60px !important; 
 
     color: #777; 
 
     position: absolute; 
 
     left: 3%; 
 
     top: -30%; 
 
    } 
 

 
    button.accordion.active:after { 
 
     content: "\2303"; 
 
     max-height: 1vh; 
 

 

 
    }

<div class="container"> 
 
    <button type="button" class="accordion">First Question</button> 
 
    <div class="panel"> 
 
     <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. </p> 
 
    </div> 
 

 
    <button type="button" class="accordion">Second Question</button> 
 
    <div class="panel"> 
 
     <p>This is the answer to question #1. Pellentesque habitant morbi....</p> 
 
    </div> 
 

 
    <button type="button" class="accordion">Third Question</button> 
 
    <div class="panel"> 
 
     <p>This is the answer to question #1. Pellentesque habitant morbi....</p> 
 
    </div> 
 

 
    <button type="button" class="accordion">Fourth Question</button> 
 
    <div class="panel"> 
 
     <p>This is the answer to question #1. Pellentesque habitant morbi....</p> 
 
    </div> 
 

 
    <button type="button" class="accordion">Fifth Question</button> 
 
    <div class="panel"> 
 
     <p>This is the answer to question #1. Pellentesque habitant morbi....</p> 
 
    </div> 
 

 
    <button type="button" class="accordion">Sixth Question</button> 
 
    <div class="panel"> 
 
     <p>This is the answer to question #1. Pellentesque habitant morbi....</p> 
 
    </div> 
 
</div>