Развернуть / свернуть таблицу HTML с помощью <th> использования JQuery

Question

Итак, у меня есть огромная таблица с несколькими заголовками таблиц. Я хочу иметь возможность максимизировать или минимизировать эти заголовки, используя JQuery (или что-то еще работает). Вот пример таблицы:

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
</table>

В основном в этом примере я хотел бы, чтобы две кнопки сворачивания / разворачивания взаимодействовали друг от друга (если я нажму одну, другая не изменится).

Answer 1

Вы пробовали это?

http://www.w3schools.com/jquery/jquery_hide_show.asp

<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });
});
</script>

В основном этот скрипт выше нацелен на id="hide"

поэтому, когда вы нажимаете на элемент id "скрыть", он запускает функцию Jquery и скрывает <p> элемент.

Тогда точно так же цели id="show"

Просто почитайте об этом, это довольно просто понять.

Answer 2

Вы можете дать идентификатор для таблицы, как показано ниже

<table id="tb1">

Затем вы можете использовать jQuery, чтобы скрыть таблицу по нажатию кнопки

$("button#minimize").click(function(){
   $("div#tb1").hide();
})

Точно так же вы можете показать таблицу при нажатии кнопки "Развернуть". Кнопки должны иметь идентификатор maximize а также minimize,