javascript - 下拉箭头 unicode 图标 静态位置 css 小型设备

Question

我正在尝试为 FAQ 实现 Accordion 。我在小屏幕中的箭头图标有问题，所以每次我按向下箭头时，它应该切换为向上箭头图标并且也位于同一个地方。但是一旦我点击向下箭头，向上箭头就会出现在顶部(在智能手机 View 中)。我尝试了 margin 但没有成功。我想知道如何在每次通过单击从一个图标切换到另一个图标时将两个图标保持在同一位置。

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

 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>