Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.03.2017, 17:54
Интересующийся
Отправить личное сообщение для dzho Посмотреть профиль Найти все сообщения от dzho
 
Регистрация: 22.09.2016
Сообщений: 21

Раскрывающий список со своим контентом
Всем привет.

Как лучше сделать раскрывающий список. Пока есть идея только с повторяющим кодом. Т.е создать несколько классов и везде им написать свой код.

Хочу сделать при клике на кнопку каждый блок со своим контентом раскрывал контент.

Так же плюсик он сейчас минус становился при клике.

Вот моя демка с кодом.
http://codepen.io/dzheysen/pen/dpWzbK

Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 05.03.2017, 18:25
Кандидат Javascript-наук
Отправить личное сообщение для Diphenyl Oxalate Посмотреть профиль Найти все сообщения от Diphenyl Oxalate
 
Регистрация: 21.01.2017
Сообщений: 139

Есть же готовое решение https://jqueryui.com/accordion/
Ответить с цитированием
  #3 (permalink)  
Старый 05.03.2017, 18:51
Интересующийся
Отправить личное сообщение для dzho Посмотреть профиль Найти все сообщения от dzho
 
Регистрация: 22.09.2016
Сообщений: 21

Да оно весит очень много.
Ответить с цитированием
  #4 (permalink)  
Старый 05.03.2017, 18:59
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

.spolier:not(.spoiler-opened) .spolier_content {
    display: none;
}


<div class="spoiler">
    <div class="spoiler_title">SPOILER</div>
    <div class="spoiler_content">Content</div>
</div>

<div class="spoiler">
    <div class="spoiler_title">SPOILER</div>
    <div class="spoiler_content">Content</div>
</div>

<div class="spoiler">
    <div class="spoiler_title">SPOILER</div>
    <div class="spoiler_content">Content</div>
</div>



$('.spoiler_title').click(function() {
   $(this.parentNode).toggleClass('spoiler-opened');
});
Ответить с цитированием
  #5 (permalink)  
Старый 05.03.2017, 19:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

dzho,
форум - поиск - открывашка
Ответить с цитированием
  #6 (permalink)  
Старый 05.03.2017, 20:05
Кандидат Javascript-наук
Отправить личное сообщение для Diphenyl Oxalate Посмотреть профиль Найти все сообщения от Diphenyl Oxalate
 
Регистрация: 21.01.2017
Сообщений: 139

Сообщение от dzho Посмотреть сообщение
Да оно весит очень много.
Вот сейчас специально посмотрел, аккордеон отдельно весит 17кб. Не так уж и много, раз всё равно используете jQuery.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выпадающий список по клику gorbuz9kin Общие вопросы Javascript 16 28.10.2015 15:02
Двойной динамический список. oneplus Элементы интерфейса 17 14.08.2015 22:42
селект переделанный под список Vasёk18 Элементы интерфейса 0 13.04.2012 23:49
Autocomplete + выпадающий список yarnik jQuery 0 08.03.2012 15:20
Заполнить список значениями из динамически созданного выпадающего списка zhuzha Элементы интерфейса 0 17.08.2010 14:40