Показ/скрытие большого количества спойлеров

[Admin]

Даже не знаю, как обозвать данную тему .

Следующие два комментария были перенесе ны из темы Скрипт спойлера с отдельным размещением заголовка и содержимого

(18.10.2015 12:24:45)Владимир писал(а):Могу предложить оплатить работу. Пожалуйста, напишите свою цену.
Нужно (для сортировки данных в таблице):
Есть много div идущих один за другим.
Первые 10 - отображаются, следующие скрыты под кат.
Каждый div относится к определенной категории A,B,C...
Div-ы разных категорий могут повторяться A, A, C, A...
Последний нажатый Div подсвечивается.

При нажатии на заголовок ВСЕ - показываются все.
При нажатии на заголовок категории - показываются только div-ы соответствующей категории (включая тех, что под катом).
При повторном нажатии на любой заголовок ничего не происходит (по возможности, чтобы подсветка в этом случае на него не переходила).
По возможности: Заголовок Свернуть/развернуть - сворачивает/разворачивает те, что под катом.

(18.10.2015 12:56:22)Владимир писал(а):Задачу можно решить как с помощью вложения div категорий, которые идут после первых 10 в div "под катом", так и с помощью присвоения к div категорий дополнительного идентификатора, указывающего находятся ли они среди первых 10 или нет.

Личные контакты были удалены.

[Admin]

Конечно стоит уточнить несколько моментов.
Не совсем понял про первые 10 видимых DIV-ов. Они всегда (в любом случае) видны и к какой категории относятся? Они всегда одни и те же?

Короче голову сломал, чтобы понять задумку автора.
Как ее понял я... Есть много DIV-ов, каждый из которых принадлежит определенной категории. Их положение не обязательно по порядку (то есть категории перемешаны). При клике по заголовку категории, данный заголовок подсвечивается и отображаются первые 10 DIV-ов данной категории. Если в категории их больше 10, то появляется кнопка, "Показать остальные", при клике по которой отображаются остальные DIV-ы данной категории.
Так же имеется кнопка "Показать все категории", при клике по которой показываются так же первые 10 DIV-ов независимо от категории и кнопка, "Показать остальные", при клике по которой отображаются все остальные DIV-ы независимо от категории.
При повторном клике по заголовку категории - ничего не происходит.

Вот код целиком.

Код:

<style type="text/css">
.selected { background-color:#CCCCCC; }
.sp_links { width:230px; text-align:center; }
.sp_body { display:none; font-style:italic; border:1px solid #0033FF;}
.sp_links { cursor:pointer; font-weight:bold; text-decoration:underline;
color:#0000FF; margin:5px; border:1px solid #808080; border-radius:7px; }
.all_links { background-color:#FF9999; }
</style>

<div class="sp_links" id="sp">Показать все категории</div>
<div class="sp_links" id="sp_aaa">Категория AAA</div>
<div class="sp_links" id="sp_bbb">Категория BBB</div>
<div class="sp_links" id="sp_ccc">Категория CCC</div>

<div class="body_aaa sp_body">Текст AAA_1</div>
<div class="body_aaa sp_body">Текст AAA_2</div>
<div class="body_bbb sp_body">Текст BBB_1</div>
<div class="body_bbb sp_body">Текст BBB_2</div>
<div class="body_ccc sp_body">Текст CCC_1</div>
<div class="body_aaa sp_body">Текст AAA_3</div>
<div class="body_ccc sp_body">Текст CCC_2</div>
<div class="body_ccc sp_body">Текст CCC_3</div>
<div class="body_ccc sp_body">Текст CCC_4</div>
<div class="body_aaa sp_body">Текст AAA_4</div>
<div class="body_aaa sp_body">Текст AAA_5</div>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.sp_links').click(function(){
  cat=$(this).attr("id").substr(2);
  all='[class^=body'+cat+']';
  if ($(this).hasClass("selected")!=true) {
   $('.all_links').remove();
   if ($(all).length>3) $(all).slice(-1).after('<div class="all_links" id="all'+cat+'">Показать остальные</div>');
   $('.sp_body').slideUp('normal');
   $(all).slice(0,3).slideDown('normal');
  }
  $('.sp_links').removeClass('selected');
  $(this).addClass('selected');
  return false;
});

$("body").on('click', '.all_links' , function(event) {
  $('.all_links').remove();
  all='[class^=body'+$(this).attr("id").substr(3)+']';
  $(all).slideDown('normal');
});
});
</script>

P.S. В данном примере количество первоначально видимых спойлеров сделал 3 вместо 10 чтобы уменьшить код.

[iqdesigner]

(18.10.2015 15:12:34)Admin писал(а):  Конечно стоит уточнить несколько моментов.
Не совсем понял про первые 10 видимых DIV-ов. Они всегда (в любом случае) видны и к какой категории относятся? Они всегда одни и те же?

Спасибо Верховному Главнокомандующему
Почти так. Идея заключается в том, что есть таблица со списком товаров, отсортированных по цене, при этом их категории перемешаны. Можно было бы сделать сортировку по категориям, но более красиво получается фильтрация, когда мы при нажатии отображаем только товары определенной категории. Товаров много, поэтому те, что после первых 10 (для примера после 3х) прячутся под кат.

Код классный, не хватает только:
1) по умолчанию список из первых 3х должен быть открыт (в этом случае есть кнопка показать/свернуть остальные).
2) когда нажимаем на категории - нужно чтобы показывались все вкладки из этой категории (кнопка показать остальные не нужна).

[Admin]

Т.е. в каждой категории есть подкатегории, а уже в них товары, или внутри категорий есть и категории и товары или просто товары? Что-то никак не пойму...


Вот еще один вариант JS кода, т.к. изменения были сделаны только в нем:

Код:

<script type="text/javascript">
$(document).ready(function(){
$('.sp_body').slice(0,3).slideDown('normal');
$('.sp_body').slice(-1).after('<div class="all_links">Показать остальные</div>');

$('.sp_links').click(function(){
  cat=$(this).attr("id").substr(2);
  if ($(this).hasClass("selected")!=true) {
   $('.all_links').remove();
   $('.sp_body').slideUp('normal');
   $('[class^=body'+cat+']').slideDown('normal');
  }
  $('.sp_links').removeClass('selected');
  $(this).addClass('selected');
  return false;
});

$("body").on('click','.all_links',function(event) {
  $('.all_links').remove();
  $('.sp_body').slideDown('normal');
});
});
</script>

[iqdesigner]

Теперь и тему можно назвать "использование спойлеров в качестве фильтров в таблице".
Конечно немного не стандартное использование спойлеров
Вот как это выглядит в таблице на примере сравнения цен на Samsung Galaxy S5: u-smart.ru/kupit/mobilnye-telefony/samsung-galaxy-s5-sm-g900f-16gb-3g-lte/
G900F и G900FD - это категории (в данном случае разновидности модели телефона).

Скрипт работает отлично , заметил только 2 нюанса:
1) если категорий 10, то кнопка "Показать остальные" не нужна (т.к показывать больше нечего).
2) когда список развернут то можно менять надпись "Показать остальные" на "Свернуть" (возвращает в исходное положение) - но это не баг, а улучшения скрипта, он уже и так классный, и далеко выходит за возможности спойлера.

Кнопка "Показать остальные" показывается, даже когда категорий меньше 10, и "остальных" уже нет. Например в списке цен на IPhone 5C u-smart.ru/kupit/mobilnye-telefony/apple-iphone-5c-32gb-mf093ru-a/ сейчас всего 9 категорий.

[Admin]

Все поправимо:

Код:

<script type="text/javascript">
$(document).ready(function(){
$('.sp_body').slice(0,10).slideDown('normal');
if ($('.sp_body').length>10) $('.sp_body').slice(-1).after('<div class="all_links">Показать остальные</div>');

$('.sp_links').click(function(){
  cat=$(this).attr("id").substr(2);
  if ($(this).hasClass("selected")!=true) {
   $('.all_links').remove();
   $('.sp_body').slideUp('normal');
   $('[class^=body'+cat+']').slideDown('normal');
  }
  $('.sp_links').removeClass('selected');
  $(this).addClass('selected');
  return false;
});

$("body").on('click','.all_links',function(event) {
   if ($('.all_links').text()!='Скрыть') {
   $('.all_links').text('Скрыть');
   $('.sp_body').slideDown('normal');
  }
  else {
   $('.all_links').text('Показать остальные');
   $('.sp_body').slice(10,$('.sp_body').length).slideUp('normal');
  }
});
});
</script>

[iqdesigner]

Работает как швейцарские часы!

[iqdesigner]

В процессе тестирования на живом примере обнаружился неожиданный баг:
если начало названия DIV-ов совпадает, то при сортировке DIVы с похожим названием показываются вместе.

Пример (при нажатии на Категория AAA в нее попадут также лишние DIVы):

Код:

<div class="sp_links" id="sp_aaa">Категория AAA</div>
<div class="sp_links" id="sp_aaab">Категория AAAB</div>

<div class="body_aaa sp_body">Текст AAA_1</div>
<div class="body_aaa sp_body">Текст AAA_2</div>
<div class="body_aaab sp_body">Текст AAAB_1</div>
<div class="body_aaab sp_body">Текст AAAB_2</div>
<div class="body_aaa sp_body">Текст AAA_3</div>
<div class="body_aaa sp_body">Текст AAA_4</div>
<div class="body_aaa sp_body">Текст AAA_5</div>

[Admin]

Верное замечание!

Данный баг легко поправим. Для этого строчку:

Код:

$('[class^=body'+cat+']').slideDown('normal');

замените на две таких:

Код:

if (cat=='') $('.sp_body').slideDown('normal');
else $('.body'+cat).slideDown('normal');

[iqdesigner]

Сработало!

Посоветуйте книги/уроки/руководства, по которым Вы учили джаваскрипт