按鈕或超連結控制區塊顯示的功能，在網頁設計時常被應用。內容過多時，可依使用者的屬性或需求，顯示對他有幫助的資訊就好，不需要全部展示，除了畫面精簡一些，更重要的是優化使用者體驗。

或許你會問這看起來很簡單，Elementor 怎麼可能沒有？我是用免費版，還真的沒有 😮，所以就自己 DIY，來看一下怎麼做吧！

用 Elementor 製作按鈕

按鈕元件(Button) 在免費版就有了，先拖兩個按鈕進來頁面，並同時為按鈕指定 CSS ID

本篇的範例，我將分別為 [顯示貓咪] 的按鈕設定 ID 為 showCat, [顯示狗狗] ID 設 showDog

用 Elementor 製作要顯示的內容

這部分是指，當訪客按下 [顯示貓咪] 或 [顯示狗狗] 時，網頁要顯示什麼對應的內容？

內容完成後，點一下區塊，左側會顯示設定框，請設定 設定 CSS ID， [顯示貓咪] 設 hideCat ，[顯示狗狗] 設 hideDog

撰寫客製 CSS and JS

利用外掛 Simple Custom CSS and JS 分別把程式碼加進 WP。

當然您功力更好的話，可以透過佈景主題編輯器，不一定要下載這個。最後，如果你有用 Astra Pro, 用隨附的 Custom Layout 也是沒問題的喔。

#hideCat,#hideDog {
    display:none ;
}

<script type="text/javascript">
jQuery(document).ready(function($){
  $('#showCat').click(function(e) {
        $('#hideCat').toggle("slow");
	$('#hideDog').hide();
  e.preventDefault();
    });
	$('#showDog').click(function(e) {
        $('#hideDog').toggle("slow");
	$('#hideCat').hide();
  e.preventDefault();
    });
});
</script>

確認頁面有套用到程式碼

程式碼都加入後，檢視網頁，效果應該就會像開頭的示範影片囉 🎉

參考資料：

How To Hide And Show Widgets On Click