Изменить стрелки у открытого/закрытого списков

Question

Как можно изменить маркированный список у details, чтобы при закрытом у него была стрелка вправо, а при открытом вниз, а остальной список также остался с кружками. Как это можно сделать на html + css без php?

<ul>
    <li>1</li>
    <li class="rassp">
        <details>
            <summary>Открой</summary>
            <p>
                Скрытый текст
            </p>    
        </details>
    </li>
</ul>

Answer 1

Я чего-то не понимаю?

ul {
  padding: 0 0 0 20px;
}

.rassp {
  list-style: none;
  margin-left: -18px;
}

summary {
  outline: 0;
  border: 0;
  cursor: pointer;
}

<ul>
  <li>1</li>
  <li class="rassp">
    <details open>
      <summary>Открой 1</summary>
      <span>Скрытый текст 1</span>
    </details>
  </li>
  <li class="rassp">
    <details>
      <summary>Открой 2</summary>
      <span>Скрытый текст 2</span>
    </details>
  </li>
</ul>

БЛОГ НА HUSL

Изменить стрелки у открытого/закрытого списков

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