前言
透過按鈕或某元素的點擊，來對不同的段或元素做隱藏與展開(可指定多數量)。
雖Elementor中就有內建”收合容器”，只是收合容器中無法再做切版或置入多個段，或是只能把想置入的內容製成版型並使用簡碼方式置入收合容器中，所以有大量資料或段需要做切換隱藏時就非常適用。
運用範圍
當頁面過長時就非常適用，也可以運用在一般的區塊編輯器中。
亦可用在手機版選單中。
預覽效果
以下是一次對「多個段」做套用，點擊下面按鈕可見效果。
本次員工旅遊分三個梯次出發，詳情如下…
第一梯:
出發時間:5/8~5/13
地點:日本
費用:每人6萬
第二梯:
出發時間:5/20~5/26
地點:日本
費用:每人6.5萬
第三梯:
出發時間:6/1~6/6
地點:日本
費用:每人7萬
實作方法
1、觸發按鈕或元素
可以拉一個按鈕或標題或圖示，在它的”進階/css類別”中填入「open_it」。
若拉的是一個按鈕，按鈕中的超連結預設是「#」，請刪掉這個「#」。
2、建立要切換隱藏的段
可以一次建立多個段，段裡面當然可以隨意切版或置入任意元素。
對每個段的”進階/css類別”中填入「show_content」。
3、貼上jQuery的code
可以在任意處或觸發按鈕的下方拉一個html工具，並貼上下列程式碼。
<script>
( function($) {
$(window).load(function() {
$('.open_it').click(function(){
$('.show_content').slideToggle();
})
$('.open_it').css("cursor","pointer")
$('.show_content').hide();
}); //end load
})(jQuery);
</script>
總結
上面的Code也可以直接埋入head中來全域執行(不一定要在Elementor中)，這樣在用區塊編輯器寫文章時，只要對點擊元素與想切換隱藏的區域套上css類別即可生效。
全域性埋Code : 使用code snippets來埋入
