Переключить Аккордеонный значок плюс / минус - PullRequest
Новая
       23

Переключить Аккордеонный значок плюс / минус

0 голосов
/ 11 октября 2018

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

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

Любая помощь с благодарностью,

HTML 

<div class="description-container">

<div class="accordion">
   <h2 class="section-header">Heading 1</h2>
   <div class="panel">
      <p class="text-light">
      • Made from all-natural, sustainable, and non-splintering rock-hard maple wood that makes sore gums happy!
      • Non-toxic, untreated, & sealed with all-natural and eco-friendly beeswax
      • Naturally anti-bacterial
      • BPA & phthalate free (thank goodness!)
      • Intricately designed with love and sanded by hand
      • Made from scratch entirely in NYC, from start to finish
      </p>
   </div>
</div>
<div class="accordion">
   <h2 class="section-header">Heading 2</h2>
   <div class="panel">
      <p class="text-light">
      • Gift ready in unique recyclable packaging, featuring all of LexyPexy's exclusive (and cute!) designs
      </p>
   </div>
</div>

JQUERY

$(".section-header").addClass("closed");

$('.section-header').click(function() {
$(this).parent(".accordion").find('.panel').slideToggle();
$(this).parent(".accordion").siblings().find('.panel').slideUp();
$(this).toggleClass("closed active");
return false;
});

Вот рабочая демонстрация - FIDDLE

Ответы [ 2 ]

0 голосов
/ 14 мая 2019

Ничего больше! 

.ui-accordion .ui-accordion-header-active:after{
	float:right;
	content:"-";
}

.ui-accordion .ui-accordion-header-collapsed:after{
	float:right;
	content:"+";
}
0 голосов
/ 11 октября 2018

1) Закройте все остальные $('.section-header') и удалите класс active

2) Переключите тот, на который нажимаете

Вот демонстрационная версия: 

$(".section-header").addClass("closed");

$('.section-header').click(function() {
  let $this = $(this);
  let $others = $(".section-header").not($this);
  
  $others.addClass("closed").removeClass('active');;
  $others.siblings().slideUp();

  $this.toggleClass("closed active");
  $this.siblings().slideToggle();

  return false;
});
body {
  font-family: Arial, Helvetica, sans-serif;
}

.accordion {
  width: 100%;
  border-bottom: 1px solid #000;
}

.accordion:first-child {
  border-top: 1px solid #000;
}

h2 {
  margin: 0;
  font-size: 16px;
  cursor: pointer;
  padding: 10px 0 10px 0;
}

.panel {
  display: none;
}

.section-header.active::after {
  content: "\2212";
  color: #000;
  display: block;
}

.section-header.closed::after {
  content: '\002B';
  color: #000;
}

.section-header::after {
  content: '\002B';
  color: #000;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="description-container">

  <div class="accordion">
    <h2 class="section-header">Heading 1</h2>
    <div class="panel">
      <p class="text-light">
        • Made from all-natural, sustainable, and non-splintering rock-hard maple wood that makes sore gums happy! • Non-toxic, untreated, & sealed with all-natural and eco-friendly beeswax • Naturally anti-bacterial • BPA & phthalate free (thank goodness!) •
        Intricately designed with love and sanded by hand • Made from scratch entirely in NYC, from start to finish
      </p>
    </div>
  </div>
  <div class="accordion">
    <h2 class="section-header">Heading 2</h2>
    <div class="panel">
      <p class="text-light">
        • Gift ready in unique recyclable packaging, featuring all of LexyPexy's exclusive (and cute!) designs
      </p>
    </div>
  </div>

</div>
...