如何垂直对齐展开手风琴的 CSS 箭头？

Question

我使用 CSS 而不是 Fontawesome 来生成箭头。我认为这比加载单独的图标库更有意义。然而，我很难将这些 CSS 箭头定位到中心，当它向上指向时，它看起来很棒，我认为它位于中心或至少靠近中心，但是当它向下指向时，看起来箭头向底部移动。如果有任何建议，我将不胜感激

"use strict";

const panelHeader = document.querySelectorAll(".panel-header");

panelHeader.forEach(item => {

  item.addEventListener("click", event => {

    event.preventDefault();

    item.parentElement.classList.toggle("open");

    const panel = item.nextElementSibling;

    panel.style.height = panel.style.height ? null : panel.scrollHeight + "px";

  });

});

:root {

  box-sizing: border-box;

}

*,

*::before,

*::after {

  box-sizing: inherit;

}

body {

  margin: 0;

  padding: 0;

}

.accordion {

  max-width: 1200px;

  margin: 0 auto;

}

.accordion-container {

  padding: 15px;

}

h2 {

  color: #444;

  font-size: 1.75rem;

  position: relative;

  padding: 0 0 25px 0;

  margin: 15px 0 20px 0;

}

h2::after {

  content: "";

  position: absolute;

  bottom: 0;

  left: 0;

  width: 50px;

  height: 5px;

  background: #f79c31;

}

.panel-container > .panel + .panel {

  margin-top: 15px;

}

.panel {

  background: #f9f9f9;

  border: 1px solid #ddd;

  border-radius: 0.1875em;

}

.panel-header {

  background: #564990;

  border-color: #564990;

  border-top-left-radius: 0.1875em;

  border-top-right-radius: 0.1875em;

  position: relative;

  transition: background .25s linear;

}

.panel-header > h4 {

  margin: 0;

}

.panel-header > h4 > a {

  position: relative;

  display: block;

  color: #fff;

  font-size: 1.125rem;

  text-decoration: none;

  padding: 15px 50px 15px 15px;

}

.panel-header:hover {

  background: #443776;

}

.panel-body {

  height: 0;

  overflow: hidden;

  transition: 0.3s height 0.2s;

}

.panel-body-container {

  padding: 15px;

}

.arrow {

  position: absolute;

  top: 22px;

  right: 10px;

  font-size: 1.7rem;

  border: solid #fff;

  border-width: 0 4px 4px 0;

  display: inline-block;

  padding: 5px;

  opacity: .5;

  transform: rotate(-135deg);

  transition: transform 0.15s linear;

}

.arrow-up {

}

.panel.open .arrow {

  transform: rotate(-315deg);

  transform-origin: center center;

}

Answer 1

根据您当前的设置，最好的解决方案是 -更改top动画类中的值。您还需要将animate值更改为 ，all以便它也以动画方式显示顶部值的变化而不跳跃。.arrow {  ...  transition: all 0.15s linear;}.panel.open .arrow {  transform: rotate(-315deg);  transform-origin: center center;  top: 18px;}您也可以将 更改transform-origin为100% center，但这会导致动画以奇怪的方式旋转。如果您不想加载字体库或 SVG 图标，您还可以考虑使用内置的 HTML 箭头并旋转它们。它的行为可能更符合您的预期 - https://www.toptal.com/designers/htmlarrows/

Answer 2

首先，您可以避免使用position: absolute解决此类问题的display: flex技巧：const panelHeader = document.querySelectorAll(".panel-header");panelHeader.forEach(item => {&nbsp; item.addEventListener("click", event => {&nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; item.parentElement.classList.toggle("open");&nbsp; &nbsp; const panel = item.nextElementSibling;&nbsp; &nbsp; panel.style.height = panel.style.height ? null : panel.scrollHeight + "px";&nbsp; });});:root {&nbsp; box-sizing: border-box;}*,*::before,*::after {&nbsp; box-sizing: inherit;}body {&nbsp; margin: 0;&nbsp; padding: 0;}.accordion {&nbsp; max-width: 1200px;&nbsp; margin: 0 auto;}.accordion-container {&nbsp; padding: 15px;}h2 {&nbsp; color: #444;&nbsp; font-size: 1.75rem;&nbsp; position: relative;&nbsp; padding: 0 0 25px 0;&nbsp; margin: 15px 0 20px 0;}h2::after {&nbsp; content: "";&nbsp; position: absolute;&nbsp; bottom: 0;&nbsp; left: 0;&nbsp; width: 50px;&nbsp; height: 5px;&nbsp; background: #f79c31;}.panel-container>.panel+.panel {&nbsp; margin-top: 15px;}.panel {&nbsp; background: #f9f9f9;&nbsp; border: 1px solid #ddd;&nbsp; border-radius: 0.1875em;}.panel-header {&nbsp; display: flex;&nbsp; /* <- Use flexbox */&nbsp; justify-content: space-between;&nbsp; align-items: center;&nbsp; background: #564990;&nbsp; border-color: #564990;&nbsp; border-top-left-radius: 0.1875em;&nbsp; border-top-right-radius: 0.1875em;&nbsp; position: relative;&nbsp; transition: background .25s linear;}.panel-header>h4 {&nbsp; margin: 0;}.panel-header>h4>a {&nbsp; position: relative;&nbsp; display: block;&nbsp; color: #fff;&nbsp; font-size: 1.125rem;&nbsp; text-decoration: none;&nbsp; padding: 15px 50px 15px 15px;}.panel-header:hover {&nbsp; background: #443776;}.panel-body {&nbsp; height: 0;&nbsp; overflow: hidden;&nbsp; transition: 0.3s height 0.2s;}.panel-body-container {&nbsp; padding: 15px;}.arrow {&nbsp; /* Don't need position absolute anymore */&nbsp; margin: 10px;&nbsp; font-size: 1.7rem;&nbsp; border: solid #fff;&nbsp; border-width: 0 4px 4px 0;&nbsp; display: inline-block;&nbsp; padding: 5px;&nbsp; opacity: .5;&nbsp; transform: rotate(-135deg);&nbsp; transition: transform 0.15s linear;}.arrow-up {}.panel.open .arrow {&nbsp; margin-top: -5px;&nbsp; /* <- Remove arrow heigth (5px) to stay at the same level */&nbsp; transform: rotate(-315deg);&nbsp; transform-origin: center center;}<!DOCTYPE html><html><head>&nbsp; <meta charset="UTF-8">&nbsp; <meta name="viewport" content="width=device-width, initial-scale=1.0">&nbsp; <link rel="stylesheet" href="accordion-faq.css">&nbsp; <title>Accordion FAQ</title></head><body>&nbsp; <section class="accordion">&nbsp; &nbsp; <div class="accordion-container">&nbsp; &nbsp; &nbsp; <header>&nbsp; &nbsp; &nbsp; &nbsp; <h2>FAQs</h2>&nbsp; &nbsp; &nbsp; </header>&nbsp; &nbsp; &nbsp; <div class="panel-container">&nbsp; &nbsp; &nbsp; &nbsp; <div class="panel">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="panel-header">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#">First question?</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="arrow">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="arrow-up"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="panel-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="panel-body-container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi blanditiis corporis dicta, dolor dolores enim facilis fuga itaque iure iusto molestiae mollitia natus nisi pariatur praesentium quo rerum vel.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <!-- .panel -->&nbsp; &nbsp; &nbsp; &nbsp; <div class="panel">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="panel-header">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#">Second question?</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="arrow arrow-up"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="panel-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="panel-body-container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi blanditiis corporis dicta, dolor dolores enim facilis fuga itaque iure iusto molestiae mollitia natus nisi pariatur praesentium quo rerum vel.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <!-- .panel -->&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <!-- .panel-container -->&nbsp; &nbsp; </div>&nbsp; &nbsp; <!-- .accordion-container -->&nbsp; </section>&nbsp; <script src="accordion-faq.js"></script></body></html>

Answer 3

尝试更改类top的属性，以便它不会被硬编码。.arrowtop: 50%然后，添加到您的transform财产中translate(0, -50%)。

Answer 4

使用topCSS 中的专有技术。这将设置旋转箭头时箭头的顶部位置。这是你的代码："use strict";const panelHeader = document.querySelectorAll(".panel-header");panelHeader.forEach(item => {&nbsp; item.addEventListener("click", event => {&nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; item.parentElement.classList.toggle("open");&nbsp; &nbsp; const panel = item.nextElementSibling;&nbsp; &nbsp; panel.style.height = panel.style.height ? null : panel.scrollHeight + "px";&nbsp; });});:root {&nbsp; box-sizing: border-box;}*,*::before,*::after {&nbsp; box-sizing: inherit;}body {&nbsp; margin: 0;&nbsp; padding: 0;}.accordion {&nbsp; max-width: 1200px;&nbsp; margin: 0 auto;}.accordion-container {&nbsp; padding: 15px;}h2 {&nbsp; color: #444;&nbsp; font-size: 1.75rem;&nbsp; position: relative;&nbsp; padding: 0 0 25px 0;&nbsp; margin: 15px 0 20px 0;}h2::after {&nbsp; content: "";&nbsp; position: absolute;&nbsp; bottom: 0;&nbsp; left: 0;&nbsp; width: 50px;&nbsp; height: 5px;&nbsp; background: #f79c31;}.panel-container > .panel + .panel {&nbsp; margin-top: 15px;}.panel {&nbsp; background: #f9f9f9;&nbsp; border: 1px solid #ddd;&nbsp; border-radius: 0.1875em;}.panel-header {&nbsp; background: #564990;&nbsp; border-color: #564990;&nbsp; border-top-left-radius: 0.1875em;&nbsp; border-top-right-radius: 0.1875em;&nbsp; position: relative;&nbsp; transition: background .25s linear;}.panel-header > h4 {&nbsp; margin: 0;}.panel-header > h4 > a {&nbsp; position: relative;&nbsp; display: block;&nbsp; color: #fff;&nbsp; font-size: 1.125rem;&nbsp; text-decoration: none;&nbsp; padding: 15px 50px 15px 15px;}.panel-header:hover {&nbsp; background: #443776;}.panel-body {&nbsp; height: 0;&nbsp; overflow: hidden;&nbsp; transition: 0.3s height 0.2s;}.panel-body-container {&nbsp; padding: 15px;}.arrow {&nbsp; position: absolute;&nbsp; top: 22px;&nbsp; right: 10px;&nbsp; font-size: 1.7rem;&nbsp; border: solid #fff;&nbsp; border-width: 0 4px 4px 0;&nbsp; display: inline-block;&nbsp; padding: 5px;&nbsp; opacity: .5;&nbsp; transform: rotate(-135deg);&nbsp; transition: transform 0.15s linear;}.arrow-up {}.panel.open .arrow {&nbsp; transform: rotate(-315deg);&nbsp; transform-origin: center center;&nbsp; top: 15px; //Do it!}<head>&nbsp; <meta charset="UTF-8">&nbsp; <meta name="viewport" content="width=device-width, initial-scale=1.0">&nbsp; <link rel="stylesheet" href="accordion-faq.css">&nbsp; <title>Accordion FAQ</title></head><body>&nbsp; <section class="accordion">&nbsp; &nbsp; <div class="accordion-container">&nbsp; &nbsp; &nbsp; <header>&nbsp; &nbsp; &nbsp; &nbsp; <h2>FAQs</h2>&nbsp; &nbsp; &nbsp; </header>&nbsp; &nbsp; &nbsp; <div class="panel-container">&nbsp; &nbsp; &nbsp; &nbsp; <div class="panel">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="panel-header">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#">First question?</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="arrow"><div class="arrow-up"></div></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="panel-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="panel-body-container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Lorem ipsum dolor sit amet, consectetur adipisicing elit.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Accusantium animi blanditiis corporis dicta, dolor dolores&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; enim facilis fuga itaque iure iusto molestiae mollitia&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; natus nisi pariatur praesentium quo rerum vel.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div> <!-- .panel -->&nbsp; &nbsp; &nbsp; &nbsp; <div class="panel">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="panel-header">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#">Second question?</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="arrow arrow-up"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="panel-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="panel-body-container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Lorem ipsum dolor sit amet, consectetur adipisicing elit.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Accusantium animi blanditiis corporis dicta, dolor dolores&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; enim facilis fuga itaque iure iusto molestiae mollitia&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; natus nisi pariatur praesentium quo rerum vel.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div> <!-- .panel -->&nbsp; &nbsp; &nbsp; </div> <!-- .panel-container -->&nbsp; &nbsp; </div> <!-- .accordion-container -->&nbsp; </section>&nbsp; <script src="accordion-faq.js"></script></body>现场演示：https://codepen.io/marchmello/pen/mdedGra

Answer 5

您需要在css 上使用position: absolute和位置，如下所示：top.panel.open .arrow"use strict";const panelHeader = document.querySelectorAll(".panel-header");panelHeader.forEach(item => {&nbsp; item.addEventListener("click", event => {&nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; item.parentElement.classList.toggle("open");&nbsp; &nbsp; const panel = item.nextElementSibling;&nbsp; &nbsp; panel.style.height = panel.style.height ? null : panel.scrollHeight + "px";&nbsp; });});:root {&nbsp; box-sizing: border-box;}*,*::before,*::after {&nbsp; box-sizing: inherit;}body {&nbsp; margin: 0;&nbsp; padding: 0;}.accordion {&nbsp; max-width: 1200px;&nbsp; margin: 0 auto;}.accordion-container {&nbsp; padding: 15px;}h2 {&nbsp; color: #444;&nbsp; font-size: 1.75rem;&nbsp; position: relative;&nbsp; padding: 0 0 25px 0;&nbsp; margin: 15px 0 20px 0;}h2::after {&nbsp; content: "";&nbsp; position: absolute;&nbsp; bottom: 0;&nbsp; left: 0;&nbsp; width: 50px;&nbsp; height: 5px;&nbsp; background: #f79c31;}.panel-container > .panel + .panel {&nbsp; margin-top: 15px;}.panel {&nbsp; background: #f9f9f9;&nbsp; border: 1px solid #ddd;&nbsp; border-radius: 0.1875em;}.panel-header {&nbsp; background: #564990;&nbsp; border-color: #564990;&nbsp; border-top-left-radius: 0.1875em;&nbsp; border-top-right-radius: 0.1875em;&nbsp; position: relative;&nbsp; transition: background .25s linear;}.panel-header > h4 {&nbsp; margin: 0;}.panel-header > h4 > a {&nbsp; position: relative;&nbsp; display: block;&nbsp; color: #fff;&nbsp; font-size: 1.125rem;&nbsp; text-decoration: none;&nbsp; padding: 15px 50px 15px 15px;}.panel-header:hover {&nbsp; background: #443776;}.panel-body {&nbsp; height: 0;&nbsp; overflow: hidden;&nbsp; transition: 0.3s height 0.2s;}.panel-body-container {&nbsp; padding: 15px;}.arrow {&nbsp; position: absolute;&nbsp; top: 22px;&nbsp; right: 10px;&nbsp; font-size: 1.7rem;&nbsp; border: solid #fff;&nbsp; border-width: 0 4px 4px 0;&nbsp; display: inline-block;&nbsp; padding: 5px;&nbsp; opacity: .5;&nbsp; transform: rotate(-135deg);&nbsp; transition: transform 0.15s linear;}.arrow-up {}.panel.open .arrow {&nbsp; transform: rotate(-315deg);&nbsp; transform-origin: center center;&nbsp; position: absolute;&nbsp; top: 30%;}<!DOCTYPE html><html><head>&nbsp; <meta charset="UTF-8">&nbsp; <meta name="viewport" content="width=device-width, initial-scale=1.0">&nbsp; <link rel="stylesheet" href="accordion-faq.css">&nbsp; <title>Accordion FAQ</title></head><body>&nbsp; <section class="accordion">&nbsp; &nbsp; <div class="accordion-container">&nbsp; &nbsp; &nbsp; <header>&nbsp; &nbsp; &nbsp; &nbsp; <h2>FAQs</h2>&nbsp; &nbsp; &nbsp; </header>&nbsp; &nbsp; &nbsp; <div class="panel-container">&nbsp; &nbsp; &nbsp; &nbsp; <div class="panel">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="panel-header">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#">First question?</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="arrow"><div class="arrow-up"></div></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="panel-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="panel-body-container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Lorem ipsum dolor sit amet, consectetur adipisicing elit.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Accusantium animi blanditiis corporis dicta, dolor dolores&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; enim facilis fuga itaque iure iusto molestiae mollitia&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; natus nisi pariatur praesentium quo rerum vel.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div> <!-- .panel -->&nbsp; &nbsp; &nbsp; &nbsp; <div class="panel">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="panel-header">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#">Second question?</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="arrow arrow-up"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="panel-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="panel-body-container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Lorem ipsum dolor sit amet, consectetur adipisicing elit.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Accusantium animi blanditiis corporis dicta, dolor dolores&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; enim facilis fuga itaque iure iusto molestiae mollitia&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; natus nisi pariatur praesentium quo rerum vel.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div> <!-- .panel -->&nbsp; &nbsp; &nbsp; </div> <!-- .panel-container -->&nbsp; &nbsp; </div> <!-- .accordion-container -->&nbsp; </section>&nbsp; <script src="accordion-faq.js"></script></body></html>