Аккордеон на jQuery

@Андрюшатина · Регистрация: 27.11.2014

Студворк — интернет-сервис помощи студентам

Всем привет.

Можете подсказать, или поделиться ссылкой, как сделать акардеон с эффектом collapse на чистом jQuery, без использования этого плагина jQuery UI

@sad67man · 21.07.2017, 23:24

Андрюшатина,

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
  <h3>Section 4</h3>
  <div>
    <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
  </div>
</div>

JavaScript
1
2
3
4
5
6
$('#accordion h3').click(function() {
  var $currentDiv = $(this).next('div');
  var $divs = $('#accordion div');
  $divs.stop().not($currentDiv).slideUp();
  $currentDiv.slideToggle();
})

https://jsfiddle.net/z0nrzk5h/

@Андрюшатина · 22.07.2017, 00:48 **[ТС]**

Огромное человеческое спасибо!

@sad67man · 22.07.2017, 00:53

Андрюшатина, Брал разметку из примера по вашей ссылке. Вы конечно же адаптируете под свою, главное, чтоб была понятна идея. Если будет кривая анимация, там что-то дергаться, поиграйтесь с отступами css, в частности с margin и padding.

Новые блоги и статьи Все статьи Все блоги /
Хочу заставить корпорации вкладываться в здоровье сотрудников: делаю мат модель здравосохранения anaschu 22.03.2026 e7EYtONaj8Y Z4Tv2zpXVVo https:/ / github. com/ shumilovas/ med2. git	1С: Программный отбор элементов справочника по группе Maks 22.03.2026 Установка программного отбора элементов справочника "Номенклатура" из модуля формы документа. В качестве фильтра для отбора справочника служит группа номенклатуры. Отбор по наименованию группы. . .	Как я обхитрил таблицу Word Alexander-7 21.03.2026 Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .	Krabik - рыболовный бот для WoW 3.3.5a AmbA 21.03.2026 без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .
1С: Программный отбор элементов справочника по значению перечисления Maks 21.03.2026 Установка программного отбора элементов справочника "Сотрудники" из модуля формы документа. В качестве фильтра для отбора служит значение перечислений. / / Событие "НачалоВыбора" реквизита на форме. . .	Переходник USB-CAN-GPIO Eddy_Em 20.03.2026 Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .	Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip

@Андрюшатина 80 / 59 / 47 Регистрация: 27.11.2014 Сообщений: 359

	Аккордеон на jQuery 21.07.2017, 19:29. Показов 1285. Ответов 3 Метки нет (Все метки) Всем привет. Можете подсказать, или поделиться ссылкой, как сделать акардеон с эффектом collapse на чистом jQuery, без использования этого плагина jQuery UI 0

@Андрюшатина 80 / 59 / 47 Регистрация: 27.11.2014 Сообщений: 359
	22.07.2017, 00:48 [ТС]
	Огромное человеческое спасибо! 0

@sad67man 2604 / 1508 / 689 Регистрация: 23.08.2015 Сообщений: 3,834
	22.07.2017, 00:53
	Андрюшатина, Брал разметку из примера по вашей ссылке. Вы конечно же адаптируете под свою, главное, чтоб была понятна идея. Если будет кривая анимация, там что-то дергаться, поиграйтесь с отступами css, в частности с margin и padding. 0

Аккордеон на jQuery

Решение