# Collapse/Show Views in App

**URL:** <https://forums.knack.com/t/collapse-show-views-in-app/8566>\
**Category:** Ask Developers\
**Created:** [April 21, 2021, 6:53pm UTC](https://forums.knack.com/t/collapse-show-views-in-app/8566 "2021-04-21T18:53:45Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![TonyAdragn12754](https://avatars.discourse-cdn.com/v4/letter/t/bcef8e/32.png) [@TonyAdragn12754](https://forums.knack.com/u/TonyAdragn12754)\
**Post date:** [April 21, 2021, 6:53pm UTC](https://forums.knack.com/t/collapse-show-views-in-app/8566/1 "2021-04-21T18:53:45Z")

</div>

Anybody have any idea how I could collapse views (specifically tables) on the app? I have some pages that have 10+ tables and I'd love to be able to collapse and expand them. Any ideas?

---

<div class="post-metadata">

**Author:** ![TonyAdragn12754](https://avatars.discourse-cdn.com/v4/letter/t/bcef8e/32.png) [@TonyAdragn12754](https://forums.knack.com/u/TonyAdragn12754)\
**Post date:** [April 22, 2021, 12:37pm UTC](https://forums.knack.com/t/collapse-show-views-in-app/8566/2 "2021-04-22T12:37:59Z")

</div>

Hi 371928693712!

This is great. Slight problem I'm running into:

My app is embedded on my website & the + signs aren't clickable. If I run the app on the Knack platform, it works like a charm.

Would you say that this is a CSS issue on my site (in which Knack is embedded on)?

Thanks for your help!

---

<div class="post-metadata">

**Author:** ![Kelson](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/kelson/32/762_2.png) [@Kelson](https://forums.knack.com/u/Kelson)\
**Post date:** [April 21, 2021, 7:06pm UTC](https://forums.knack.com/t/collapse-show-views-in-app/8566/3 "2021-04-21T19:06:15Z")

</div>

Hi Tony,&nbsp;  
  
I have a plugin for this that I built.&nbsp;Add this code to the JavaScript section of your application and change the scene ID and the View ID in the scene event handler:

$(document).on("knack-scene-render.scene\_XX",&nbsp;function&nbsp;(event,&nbsp;scene)&nbsp;{

&nbsp;&nbsp;Knack.fn.hideExpand("view\_XX"); //VIEWID YOU WANT TO COLLAPSE  
});

//PLUGIN - DONT CHANGE THIS CODE

Knack.fn = Knack.fn || {};  
Knack.fn.hideExpand&nbsp;=&nbsp;(viewKey)&nbsp;=\>&nbsp;{

&nbsp;&nbsp;Knack.$(`#${viewKey}&nbsp;.expandBtn`).remove();

&nbsp;&nbsp;Knack.$(`#${viewKey}&nbsp;.kn-title`).prepend(

&nbsp;&nbsp;&nbsp;&nbsp;'\<i&nbsp;class="fa&nbsp;fa-plus&nbsp;toggleBtn&nbsp;hidden"\>\</i\>'

&nbsp;&nbsp;);

&nbsp;&nbsp;Knack.$(`#${viewKey}&nbsp;section`).hide();

&nbsp;&nbsp;Knack.$(`#${viewKey}&nbsp;.kn-table-wrapper`).hide();

&nbsp;&nbsp;Knack.$(`#${viewKey}&nbsp;.kn-records-nav`).hide();

&nbsp;&nbsp;Knack.$(`#${viewKey}&nbsp;.toggleBtn`).on("click",&nbsp;function&nbsp;()&nbsp;{

&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;classes&nbsp;=&nbsp;Knack.$(this).attr("class").split(/\s+/);

&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(classes.indexOf("hidden")&nbsp;===&nbsp;-1)&nbsp;{

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//hide&nbsp;it

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;$section&nbsp;=&nbsp;Knack.$(this).parent().parent().siblings("section");

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;$table&nbsp;=&nbsp;Knack.$(this)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.parent()

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.parent()

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.siblings(".kn-table-wrapper");

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;($section.length)&nbsp;{

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$section.hide();

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;if&nbsp;($table.length)&nbsp;{

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;$navFilters&nbsp;=&nbsp;Knack.$(this)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.parent()

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.parent()

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.siblings(".kn-records-nav");

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$table.hide();

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$navFilters.hide();

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Knack.$(this).addClass("hidden");

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Knack.$(this).removeClass("fa-minus");

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Knack.$(this).addClass("fa-plus");

&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//show&nbsp;it

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;$section&nbsp;=&nbsp;Knack.$(this).parent().parent().siblings("section");

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;$table&nbsp;=&nbsp;Knack.$(this)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.parent()

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.parent()

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.siblings(".kn-table-wrapper");

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;($section.length)&nbsp;{

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$section.show();

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;if&nbsp;($table.length)&nbsp;{

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;$navFilters&nbsp;=&nbsp;Knack.$(this)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.parent()

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.parent()

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.siblings(".kn-records-nav");

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$table.show();

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$navFilters.show();

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Knack.$(this).removeClass("hidden");

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Knack.$(this).removeClass("fa-plus");

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Knack.$(this).addClass("fa-minus");

&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;});

};  
  
//END CODE  
  
This should work for you. Reach out if you have any issues:  
  
Kelson  
[kelson@ksensetech.com](mailto:kelson@ksensetech.com)  
[https://www.ksensetech.com/knack/](https://www.ksensetech.com/knack/)

---

<div class="post-metadata">

**Author:** ![MichaelG](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/michaelg/32/758_2.png) [@MichaelG](https://forums.knack.com/u/MichaelG)\
**Post date:** [May 9, 2022, 7:37pm UTC](https://forums.knack.com/t/collapse-show-views-in-app/8566/4 "2022-05-09T19:37:06Z")

</div>

Hi @Kelson, I am trying to implement your plugin.

I pasted it in JS section, and changed the scene and view IDs.

It does hide the view, but I don’t see the clickable icon/title to collapse/show the view.

tks for the help.