Анимированный цветной треугольник для выпадающего списка slidetiggle()

Question

Есть три выпадающих списка, по клику на которые раскрывается список. Не могу понять, как сделать анимированный треугольник (скрин прилагаю), при клике.

$(document).ready(function () {
    $(".textblock4").click(function() {
        $(this).next(".dropdowntext4").slideToggle(100);
    })  
});

.section4 {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.sectioncontent4 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 1350px;
    max-width: 1350px;
    margin: 70px 0 90px 0;
}

.headingtext4 {
    display: flex;
    justify-content: start;
    width: 100%;
    max-width: 100%;
    font-family: CeraPro;
    font-style: normal;
    font-weight: bold;
    font-size: 48px;
    line-height: 60px;
    color: #E63D63;
}

.dropdownblocks4 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 40px;
    width: 100%;
    max-width: 100%;
    margin: 70px 0 0 0;
}

.block4 {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.textblock4 {
    font-family: CeraPro;
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 30px;
    color: #6C0C52;
    cursor: pointer;
    user-select: none;
    margin: 10px 0 0 0;
}

.dropdowntext4 {
    display: none;
    font-family: CeraPro;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 30px;
    margin: 10px 0 0 0;
}

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<div class="section4">
        <div class="sectioncontent4">
            <span class="headingtext4">
                Основные направления исследований
            </span>
            <div class="dropdownblocks4">
                <div class="block4">
                    <img src="img/icons/0011.png">

                    <span class="textblock4">
                        Исследование рынка
                    </span>

                    <div class="dropdowntext4">

                        <li>объем в денежном и натуральном выражении</li>
                        <li>оценка структуры и объёма рынка</li>
                        <li>подбор выгодного поставщика</li>
                        <li>структура по сегментам</li>
                        <li>отраслевые и региональные особенности</li>
                        <li>уровень конкуренции</li>
                        <li>динамика развития и тенденции</li>
                        <li>факторы влияющие на конъюнктуру рынка</li>
                        <li>риски и возможности для роста</li>
                    </div>
                </div>
                <div class="block4">
                    <img src="img/icons/0013.png">
                    <span class="textblock4">
                        Анализ конкурентов
                    </span>
                    <div class="dropdowntext4">
                        <li>выявление главных конкурентов и их доли</li>
                        <li>обзор и сравнительный анализ компаний</li>
                        <li>маркетинговые стратегии</li>
                        <li>ценовая и сбытовая политика</li>
                        <li>потенциальные цели</li>
                        <li>выявление сильных и слабых сторон (SWOT-анализ)</li>
                    </div>
                </div>
                <div class="block4">
                    <img src="img/icons/0041.png">
                    <span class="textblock4">
                        Изучение потребителей
                    </span>
                    <div class="dropdowntext4">
                        <li>анализ спроса</li>
                        <li>анализ клиентов и потребительского поведения</li>
                        <li> сегментирование потребителей</li>
                        <li> факторы влияющие на лояльность к поставщикам</li>
                        <li> построение моделей потребительского поведения</li>
                        <li> ценовые ожидания</li>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

Даже на css можно это сделать

*{
  user-select: none;
}

svg{
  display: inline-block;
  vertical-align: middle;
  fill: #000;
}

.icon{
  display: inline-block;
  transform-origin: center;
  transition: 0.1s;
  transform: translateY(1px);
}

input:checked~.icon{
  transform: rotate(90deg)translateX(4px);
}

input:checked~.icon svg{
  fill: red;
}

input[type="checkbox"]{
  display: none;
}

ul{
  display: flex;
  justify-content: space-around;
  list-style: none;
}

.text svg{
  width: 10px;
}

.text span{
  font-size: 14px;
}

<ul>
  <li class="text">
    <label>
    <input type="checkbox">
    <span>Исследование рынка</span>
    <i class="icon">
      <svg viewBox="0 0 20 20">
        <path d="M0,0 20,10 0,20" />
      </svg>
    </i>
    </label>
  </li>

  <li class="text">
    <label>
    <input type="checkbox">
    <span>Анализ конкурентов</span>
    <i class="icon">
      <svg viewBox="0 0 20 20">
        <path d="M0,0 20,10 0,20" />
      </svg>
    </i>
    </label>
  </li>

  <li class="text">
    <label>
    <input type="checkbox">
    <span>Изучение потребителей</span>
    <i class="icon">
      <svg viewBox="0 0 20 20">
        <path d="M0,0 20,10 0,20" />
      </svg>
    </i>
    </label>
  </li>
</ul>

Второй вариант выпадашка на css

* {
  user-select: none;
}

ul {
  display: flex;
  justify-content: space-around;
  list-style: none;
  margin: 0;
  padding: 0;
}

li span {
  font-size: 24px;
}

.icon {
  display: inline-block;
  transition: 0.1s;
  transform: translateY(-3px);
}

svg {
  width: 10px;
}

.drop {
  display: none;
  font-size: 24px;
}

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]:checked~li>.drop {
  display: block;
}

input[type="checkbox"]:checked~li>.icon {
  transform: rotate(90deg);
}

<ul class="parent">
  <label>
  <input type="checkbox">
  <li class="parentLi">
    <span>Категория1</span>
    <i class="icon">
      <svg viewBox="0 0 20 20">
        <path d="M0,0 20,10 0,20"/>
      </svg>
    </i>
    <ul class="drop">
      <li>Пункт 1.1</li>
      <li>Пункт 1.2</li>
      <li>Пункт 1.3</li>
      <li>Пункт 1.4</li>
      <li>Пункт 1.5</li>
    </ul>
  </li>
  </label>

  <label>
  <input type="checkbox">
  <li class="parentLi">
    <span>Категория2</span>
    <i class="icon">
      <svg viewBox="0 0 20 20">
        <path d="M0,0 20,10 0,20"/>
      </svg>
    </i>
    <ul class="drop">
      <li>Пункт 1.2</li>
      <li>Пункт 1.2</li>
      <li>Пункт 1.3</li>
      <li>Пункт 1.4</li>
      <li>Пункт 1.5</li>
    </ul>
  </li>
  </label>

  <label>
  <input type="checkbox">
  <li class="parentLi">
    <span>Категория3</span>
    <i class="icon">
      <svg viewBox="0 0 20 20">
        <path d="M0,0 20,10 0,20"/>
      </svg>
    </i>
    <ul class="drop">
      <li>Пункт 3.1</li>
      <li>Пункт 3.2</li>
      <li>Пункт 3.3</li>
      <li>Пункт 3.4</li>
      <li>Пункт 3.5</li>
    </ul>
  </li>
  </label>
</ul>

Пример с изменением цвета треугольника: https://codepen.io/topicstarter/pen/gOpvMzG

БЛОГ НА HUSL

Анимированный цветной треугольник для выпадающего списка slidetiggle()

Ответы (1 шт):