Часто интернет магазины публикуют на своем сайте таблицы с описанием товара, его комплектацией и ценой. И бывает так, что такие таблицы занимают очень много места, а если таблица не одна, то такая страница превращается в очень длинный список, который становится не удобно просматривать в поиске нужного материала.
На помощь в этом случае приходят раскрывающиеся таблицы, которые сначала показывают только часть информации, а для просмотра всего содержимого, ее можно развернуть, например нажав на кнопку "Показать еще", что положительно сказывается на читаемости такой страницы.
Ниже вы найдете подробную инструкцию, как сделать кнопку "Показать еще" в таблице и как сделать так, чтобы такую кнопку можно было указать для нескольких таблиц.
Для работы будем использовать HTML, CSS, JS(JQuery).
Первым делом нужно сделать каркас такой таблицы, чтобы все правильно работало.
Не будем здесь рассматривать создание самой таблицы и оформление ее внешнего вида, перейдем сразу к функционалу такой таблицы, так как этот код лишь дополнение к уже готовой таблице, а не ее создание с нуля.
HTML код таблицы
Оформим нашу таблицу в тег div и при необходимости дадим ему какой-нибудь класс. Это нужно больше для визуального оформления таблицы, чем для ее функционала.
<div class="one-table">
<table>
<tbody>...</tbody>
<tbody class="hideblock" id="tab1">...</tbody>
<tfoot>
<tr>
<td class="table-button"colspan="3" >
<span class="services_more" data-tab="tab1">Показать еще</span>
</td>
</tr>
</tfoot>
</table>
</div>
Если говорить о функционале, то для того чтобы сделать кнопку "Показать еще", такая таблица должна иметь два блока с тегом tbody. Первый блок будет отображать таблицу в сокращенном варианте, а содержимое второго блока будет разворачиваться при нажатии на кнопку "Показать еще".
Второму блоку tbody нужно присвоить класс и идентификатор, чтобы потом с ними работать в скрипте. В нашем примере, это класс hideblock и идентификатор tab1.
Далее нашей таблице нужна сама кнопка "Показать еще", с помощью которой мы будем разворачивать скрытую часть таблицы. В примере мы ее поместили внутри элемента tfoot нашей таблицы.
Кнопке также нужно дать какой то класс, например table-button, чтобы сделать ей внешнее оформление.
Также внутри тега td нашей кнопки мы разместим тег span и присвоим ему некий класс и атрибут data-tab, это нужно для работы нашего скрипта.
Нужно заметить, что data-tab здесь должен быть такой же, как и id у второго блока tbody нашей таблицы.
Это все, что касается HTML кода, чтобы сделать кнопку "Показать еще" в таблице, далее рассмотрим таблицу стилей таблицы и скрипт для обработки кода.
CSS код таблицы
Из стилей для нашей таблице нужно добавить лишь класс hideblock, который отвечает за скрытую часть таблицы и сделать его не видимым.
.hideblock {
display: none;
}
Появляться содержимое этого блока будет по клику на кнопку с помощью скрипта.
JS(jQuery) код таблицы
Разворачиваться таблица будет по нажатии на специальную кнопку с помощью скрипта.
Ниже будет описание данного скрипта, вам нужно будет переделать его под свои классы и идентификаторы, если вы использовали не такие, как в примере.
jQuery(function() {
$(".services_more").click(function() {
let id = $(this).attr("data-tab");
if ($("#" + id).hasClass("hideblock")) {
$("#" + id).removeClass("hideblock");
$(this).attr("old-data", $(this).html());
$(this).html("Свернуть");
}
else {
$("#" + id).addClass("hideblock");
$(this).html($(this).attr("old-data"));
}
});
});
При нажатии на кнопку с классом services_more в переменную id записывается значение атрибута data-tab. В котором хранится id тега.
Далее обрабатывается условие, где проверяется наличия класса hideblock у тега в переменной id.
Если класс есть, то он удаляется и в атрибут old-data кнопки добавляется html содержимое тега id, текст на кнопке меняется на "Свернуть"
Если класса нет, то он добавляется к тегу из переменной id и в содержимое html кнопки записывается содержимое атрибута old-data.
Kwork