前言
透過按鈕或某元素的點擊,來對不同的段或元素做隱藏與展開(可指定多數量)。
雖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工具,並貼上下列程式碼。
總結
上面的Code也可以直接埋入head中來全域執行(不一定要在Elementor中),這樣在用區塊編輯器寫文章時,只要對點擊元素與想切換隱藏的區域套上css類別即可生效。
全域性埋Code : 使用code snippets來埋入