Граница, чтобы остановить уменьшение размера при нажатии

Question

Я работаю на гармошке. Я использовал jQuery для анимации. Когда я нажимаю на голову аккордеона, граница с + уменьшается в размере. Я только хочу, чтобы знак плюса изменился, а границы остались прежнего размера.

$(document).ready(function() {
  //toggle the component with class accordion_body
  $(".accordion_head").click(function() {
    $(this).removeClass('coll-back');
    if ($('.accordion_body').is(':visible')) {
      $(".accordion_body").slideUp(400);
      $("plusminus").text('+');
      $(this).removeClass('coll-back');
      $('.rmv-cls').removeClass('coll-back');
    }

    if ($(this).next(".accordion_body").is(':visible')) {
      $(this).next(".accordion_body").slideUp(400);
      $(this).children("plusminus").text('+');
      $(this).removeClass('coll-back');
    } else {
      $(this).next(".accordion_body").slideDown(400);
      $(this).children("plusminus").text('');
      $(this).children("plusminus").append('<hr class="hr-clc">');
      $(this).toggleClass('coll-back');
      $(this).addClass('rmv-cls');
    }
  });
});

$('plusminus').on("click", function() {
  $(this).toggleClass('active');
  $(this).text() == "+" ? $(this).text("-") : $(this).text("+");
});

.plusminus {
  vertical-align: middle;
  background-color: #139c4b;
  color: #fff;
  margin-left: 13px;
  padding: 15px 25px;
  font-size: 36px;
  -webkit-font-smoothing: subpixel-antialiased;
}

#plus-1 {
  position: relative;
  top: 5px;
  left: -27%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="start">
  <div class="acc-main">
    <div class="container">
      <div class="kind">
        <div class="accordion_container">
          <div class="accordion-main">
            <div class="accordion_head"><span class="plusminus" id="plus-1">+</span>Because She Matters
            </div>
            <div class="accordion_body" id="a1" style="display: none;">
              <p class="para-acc"> 
              </p>
            </div>
          </div>
</section>

Answer 1

Вы уже добавили .active класс к .plusmimus классу по щелчку аккордеона. Я добавил дополнительный код CSS, чтобы он выглядел лучше, чем вам нужно.

$(document).ready(function() {
  $('.plusminus').on("click", function() {
    $(this).toggleClass('active');
  });
});

.plusminus {
  display: inline-block;
  vertical-align: middle;
  background-color: #139c4b;
  color: #fff;
  margin-left: 13px;
  padding: 30px;
  cursor: pointer;
  position: relative;
}

.plusminus::before,
.plusminus::after {
  position: absolute;
  content: '';
  width: 16px;
  height: 2px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: #FFF;
  transition: 0.15s ease-out all;
}
.plusminus::after {
  width: 2px;
  height: 16px;
}
.plusminus.active::before {
  transform: rotate(180deg);
}
.plusminus.active::after {
  transform: rotate(90deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="plusminus"></span>

Пожалуйста, дайте мне знать, если это поможет.

Answer 2

Используемый шрифт имеет символы разной ширины, то есть символы + и - имеют разную ширину. Поэтому, когда они переключаются, это влияет на общую ширину блока. Вы можете решить это, используя моноширинный шрифт, такой как Monospace, Courier, Courier New или Lucida Console.

Другое решение - установить фиксированный width для блока.
Во-первых, <span> должен быть блочным элементом. Вы добавляете к этому display: inline-block. Тогда отступ будет считаться в пределах общей ширины по умолчанию, поэтому у вас есть отступы 25px для левого и правого каналов. Ваш блок составляет около 72px (когда +), тогда вы можете добавить width: 22px (50px + 22px = 72px фиксированной ширины).

.plusminus {
  vertical-align: middle;
  background-color: #139c4b;
  color: #fff;
  margin-left: 13px;
  padding: 15px 25px;
  font-size: 36px;
  -webkit-font-smoothing: subpixel-antialiased;
  display: inline-block; /* add this */ 
  width: 22px; /* add this */
}

Немного изменится высота гармошки, но ничего большого.

Answer 3

Добавьте следующий css код

.plusminus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    line-height: 70px;
    box-sizing: border-box;
}