Как сделать простейший аккордеон HTML +CSS (без JS)?

Question

[Алексей]

Без всяких наворотов стилей (по клику).
текст ⯆
->

текст ⯅
подтекст1
подтекст2
подтекст3

Единственное чтобы хотелось иметь - изменение стрелки и небольшую плавность
Все примеры которые находил в инете с какими то наворотами

текст (без стрелки) сейчас выводится (ширина меняется в зависимости от разрешения экрана)
<p class="txnm">текст</p>

.txnm {
  width:19%;
  line-height: 1em!important;
  display:inline-block;
vertical-align: top;
  margin-bottom: 0 !important;
  background-color: #eef;
  margin-right: 0px;
  margin-top: 2px;
}
@media all and (max-width: 1000px) {
 .txnm {
  line-height: 1em!important;
  width:47%;
  display:inline-block;
vertical-align: top;
  margin-bottom: 0 !important;
  background-color: #eef;
  margin-right: 0px;
  margin-top: 2px;   
 }
}
@media all and (max-width: 800px) {
 .txnm {
  line-height: 1em!important;
  width:99%;
  display:inline-block;
vertical-align: top;
  margin-bottom: 0 !important;
  background-color: #eef;
  margin-right: 0px;
  margin-top: 2px;   
 }
}

Answer 1

[Stalker_RED]

Набросал попроще: jsfiddle.net/nrj9dga9
UPD: теперь со стрелочками jsfiddle.net/nrj9dga9/1

Comments

[Алексей]

Если оставить только один аккордеон (а мне надо именно один!) - не закрывается, как исправить?
Как сделать чтобы закрывался по 2-му клику, это возможно?

[Алексей]

Как сделать чтобы закрывался по 2-му клику, это возможно?

[Stalker_RED]

Алексей, без js сходу не могу придумать. Наверняка можно что-то адское наворотить, чекбокс добавить, может быть и подменять label. Но это уже без меня.

[Алексей]

Спасибо заменил радио на checkbox
все стало как надо в песочнице, теперь попробую на тестовом сайте

Answer 2

[Sanes]

Не надоело страдать? JS работает в любом утюге.

Comments

[Алексей]

у меня wordpress и для начала туда он ставится как то непонятно как

[Алексей]

И вроде вверху предложили рабочее решение, по крайней мере работает в песочнице... чем оно плохо?

[Stalker_RED]

Алексей, неочевидный хак, такие штуки сложно поддерживать.

[Алексей]

Stalker_RED, не не стандартное решение??? которое вы же предложили?

[Stalker_RED]

Алексей, да я же и предложил. Вы же просили без js - вот оно.
И да, я в своей работе такое не стал бы делать. Сделал бы с js.

[Алексей]

Stalker_RED, Можно расположить в одну линию или не получится?
jsfiddle.net/selftrips/5h6etjv4

[Алексей]

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

[Stalker_RED]

Алексей,

"текст2" всплывает потому, что у .txnm прописан inline-block;
И да, я с трудом догадываюсь, что вы пытаетесь сделать.

Про "регистрировать" не понял совсем. Хотя я уже несколько лет во внутренности вордпресса не заглядывал, может там без регистрации и СМС уже нельзя скрипты писать?

Чтобы получить стрелочки ↑↓→← с зажатым альтом на цифровой клавиатуре набирайте 24, 25, 26 или 27 соответственно.

[Алексей]

Stalker_RED, а как самый простой способ вставить JS в WP?
Куда HTML и CSS понимаю вставлять.
selftrips.ru
пункт меню "наши страны"
у некоторых позиций есть подкатегории, которые хочется сделать выпадающим аккордеоном.

[Алексей]

Stalker_RED, осталось только тест поднять jsfiddle.net/selftrips/5h6etjv4/1
как это сделать?

[Stalker_RED]

Алексей, jsfiddle.net/5h6etjv4/2

[Алексей]

Stalker_RED, Круто!))) Спасибо!!!

[Алексей]

Stalker_RED, а можете пояснить чем может грозить применения такого решения а не JS? перестанет работать или не во всех браузерах?

[Stalker_RED]

Алексей, да нет, даже в ИЕ оно с седьмой версии работает, а в современных браузерах совсем всё хорошо: caniuse.com/#feat=css-sel3

Но вообще - использование элементов формы для таких целей - костыль. И да, вам придется для каждой такой менюшки уникальный id сгененрировать и вписать его в label

[Алексей]

Stalker_RED,

name="accordion" id="c1" class="accordion">
    <label for="c1">страна</label>
    <p>с11то1</p>

Вот эти? (здесь с1) В css ничего не надо дописывать? Тогда это не страшно, я все равно циклом вывожу, сделаю номерные или вообще = slug верхнего элемента!)) (в примере страна) слаги уникальны.

[Stalker_RED]

Алексей, Каждый label должен указывать на соответствующий чекбокс.
И лучше не просто номерные, а с каким-то префиксом, чтобы не конфликтовать со старыми браузерами.

[Алексей]

Stalker_RED, ну так у меня будет Россия со слагом типа russia, он будет уникальным, его и буду использовать.

[Алексей]

Stalker_RED, А ммоежет еще с модальным окно предложить такое же простое решение? Как сделать простое модальное окно на HTML+CSS (без JS)?

[Stalker_RED]

Алексей, вам же дали ссылку

[Алексей]

Stalker_RED, мне кажется это не совсем то, слишком много кода

[Stalker_RED]

Алексей, идея та-же, что и c этим аккордеоном. Чекбокс и css siblings для показа модалки и несколько управляющих label.

[Алексей]

Stalker_RED, так мне то же так показалось, а там кода CSS на 2 страницы

[Stalker_RED]

Алексей, Это разве много? Вот у вас для этих аккордеонов получилось примерно на страницу, при том что оформлены они практически "никак". А модалка несколько сложнее.

[Алексей]

Stalker_RED, Это мой код,я его не считаю, а ваш -голый аккордеон 6 кстрочек (если каждый класс считать за строчку)