Показать иконку аккордеона в вертикальном среднем положении - PullRequest
Новая
       32

Показать иконку аккордеона в вертикальном среднем положении

2 голосов
/ 04 мая 2020 

var acc = document.getElementsByClassName("mobile_toggle");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var toggle_content = this.nextElementSibling;
    if (toggle_content.style.maxHeight) {
      toggle_content.style.maxHeight = null;
    } else {
      toggle_content.style.maxHeight = toggle_content.scrollHeight + "px";
    } 
  });
}
@media only screen and (max-width: 767px) {
.mobile_toggle {
    padding: 5px !important;
    cursor: pointer;
	font-size: 15px;
	transition: 0.5s;
}
.toggle_content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.mobile_toggle:active i {
	-ms-transform: rotate(50deg); /* IE 9 */
    transform: rotate(50deg);
}
.active, .mobile_toggle:hover {
 	 background-color: #ccc;
}
.mobile_toggle:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
    font-size:20px
 }
.active:after {
	content: "\2212";
}
}
<div class="mobile_toggle">
<span>Our hardcover books are library bound with exposed reinforced endsheets, which means extra lasting power Will your books and materials with?  </span>
</div>
  <div class="toggle_content">
    <p>Our hardcover books are library bound with exposed reinforced endsheets, which means extra lasting power, use after use. They are side sewn or section sewn, and all covers are laminated with glossy film. The books are vibrant, durable, and unconditionally guaranteed. </p>
  </div>

Я создал этот аккордеон только для мобильных посетителей. Если я использую длинный заголовок, я не могу изменить положение значка после.

Я хочу отобразить иконку в середине названия аккордеона!

Если это невозможно с иконкой после, есть ли способ использовать изображение / SVG для той же функции.

Спасибо, Суман

Ответы [ 2 ]

2 голосов
/ 04 мая 2020

Конечно, это возможно сделать с вашим элементом ::after. Вы можете использовать flexbox для простого выравнивания содержимого, это также влияет на элементы ::before и ::after. В вашем случае вы можете добавить следующий CSS фрагмент к вашему классу .mobile_toggle, чтобы выровнять значок по центру заголовка. 

display: flex;
align-items: center;

Я также отредактировал ваш фрагмент, чтобы увидеть это изменение полностью . 

var acc = document.getElementsByClassName("mobile_toggle");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var toggle_content = this.nextElementSibling;
    if (toggle_content.style.maxHeight) {
      toggle_content.style.maxHeight = null;
    } else {
      toggle_content.style.maxHeight = toggle_content.scrollHeight + "px";
    } 
  });
}
@media only screen and (max-width: 767px) {
.mobile_toggle {
    padding: 5px !important;
    cursor: pointer;
	font-size: 15px;
	transition: 0.5s;
  
  display: flex;
  align-items: center;
}
.toggle_content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.mobile_toggle:active i {
	-ms-transform: rotate(50deg); /* IE 9 */
    transform: rotate(50deg);
}
.active, .mobile_toggle:hover {
 	 background-color: #ccc;
}
.mobile_toggle:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
    font-size:20px
 }
.active:after {
	content: "\2212";
}
}
<div class="mobile_toggle">
<span>Our hardcover books are library bound with exposed reinforced endsheets, which means extra lasting power Will your books and materials with?  </span>
</div>
  <div class="toggle_content">
    <p>Our hardcover books are library bound with exposed reinforced endsheets, which means extra lasting power, use after use. They are side sewn or section sewn, and all covers are laminated with glossy film. The books are vibrant, durable, and unconditionally guaranteed. </p>
  </div>
1 голос
/ 04 мая 2020

Почему бы не попробовать что-то подобное? Я надеюсь, что это служит цели, и я понял ваш вопрос. Пожалуйста, предоставьте больше информации о том, как вы хотите разместить значок after.

Я только добавил следующее CSS. Я «удалил» существующий float, поскольку мы хотим центрировать иконку.

Обновление: Я оставляю оригинальное решение здесь. ОП разъяснил, что на самом деле нужно, поэтому я также использую гибкий подход, предложенный @luze для вертикального выравнивания кнопок + и -. 

.mobile-toggle:after, .active::after {
    display: block;
    float: none;
    width: 100%;
    text-align: center;
}


var acc = document.getElementsByClassName("mobile_toggle");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var toggle_content = this.nextElementSibling;
    if (toggle_content.style.maxHeight) {
      toggle_content.style.maxHeight = null;
    } else {
      toggle_content.style.maxHeight = toggle_content.scrollHeight + "px";
    } 
  });
}
@media only screen and (max-width: 767px) {
.mobile_toggle {
    padding: 5px !important;
    cursor: pointer;
	font-size: 15px;
	transition: 0.5s;
}
.toggle_content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.mobile_toggle:active i {
	-ms-transform: rotate(50deg); /* IE 9 */
    transform: rotate(50deg);
}
.active, .mobile_toggle:hover {
 	 background-color: #ccc;
}
.mobile_toggle:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
    font-size:20px;
    display: block;
    float: none;
    width: 100%;
    text-align: center;
 }
.active:after {
    content: "\2212";
    display: block;
    float: none;
    width: 100%;
    text-align: center;
}
}
<div class="mobile_toggle">
<span>Our hardcover books are library bound with exposed reinforced endsheets, which means extra lasting power Will your books and materials with?  </span>
</div>
  <div class="toggle_content">
    <p>Our hardcover books are library bound with exposed reinforced endsheets, which means extra lasting power, use after use. They are side sewn or section sewn, and all covers are laminated with glossy film. The books are vibrant, durable, and unconditionally guaranteed. </p>
  </div>
...