# Toggle show/hide table

**URL:** <https://forums.knack.com/t/toggle-show-hide-table/7233>\
**Category:** API & Custom Code\
**Created:** [December 11, 2017, 3:17am UTC](https://forums.knack.com/t/toggle-show-hide-table/7233 "2017-12-11T03:17:18Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![GregJohll83463](https://avatars.discourse-cdn.com/v4/letter/g/3ec8ea/32.png) [@GregJohll83463](https://forums.knack.com/u/GregJohll83463)\
**Post date:** [December 11, 2017, 3:17am UTC](https://forums.knack.com/t/toggle-show-hide-table/7233/1 "2017-12-11T03:17:18Z")

</div>

I'm looking to have a button show up either before or after a view (don't care which), that when clicked would toggle a view between being shown and not shown.

Thanks for any assistance.

Greg

---

<div class="post-metadata">

**Author:** ![KeithSterl25609](https://avatars.discourse-cdn.com/v4/letter/k/ee59a6/32.png) [@KeithSterl25609](https://forums.knack.com/u/KeithSterl25609)\
**Post date:** [December 13, 2017, 10:41am UTC](https://forums.knack.com/t/toggle-show-hide-table/7233/2 "2017-12-13T10:41:52Z")

</div>

I haven't tested this so not sure it works, but...

 

1. Make a menu on the page with a button that links to a URL. For the page url type...

 

javascript.void(0);

 

2.Then in your code, copy/paste this...

 

// TYPE THIS PART FOR EACH BUTTON  
(function () {  
var pageNum = "scene\_XX"; //\<--page that has the menu and the view to hide  
var hideViewNum = "view\_XX"; //\<--view to hide  
var menuViewNum = "view\_XX"; //\<--menu view that has the button  
var buttonText = "Button Text Here"; //\<--text on the button  
$(document).on("knack-page-render." + pageNum, ((event, page) =\> {  
 $("#" + menuViewNum + " a span:contains('"+ buttonText + "')").click(toggleView(hideViewNum));  
});  
})();

 

// SHOWS/HIDES THE VIEW - DON'T REPEATEDLY TYPE THIS  
function toggleView(viewNum) {  
 var $view = $("#" + viewNum);  
 if ($view.is(":visible")) {  
 $view.hide();  
 } else {  
 $view.show();  
 }  
}

 

/\*\*\* NOTE THAT EACH BUTTON ON A SINGLE PAGE NEEDS UNIQUE TEXT FOR THIS TO WORK \*\*\*/