# Search UI - how to collapse/expand everything under the search bar

**URL:** <https://discuss.elastic.co/t/search-ui-how-to-collapse-expand-everything-under-the-search-bar/311778>\
**Category:** Elastic Search\
**Tags:** elastic-app-search\
**Created:** [August 10, 2022, 1:10am UTC](https://discuss.elastic.co/t/search-ui-how-to-collapse-expand-everything-under-the-search-bar/311778 "2022-08-10T01:10:54Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![tonyfam](https://avatars.discourse-cdn.com/v4/letter/t/6de8d8/32.png) [@tonyfam](https://discuss.elastic.co/u/tonyfam)\
**Post date:** [August 10, 2022, 1:10am UTC](https://discuss.elastic.co/t/search-ui-how-to-collapse-expand-everything-under-the-search-bar/311778/1 "2022-08-10T01:10:54Z")

</div>

Hello,  
We are using the generated "Search Experience" Search UI package , which is so useful!  
It's a search bar on our website.

Now, we'd like to have a button so the website user can collapse/expand the search results, and expand them again. I am trying to use a bootstrap button with the "collapse" class, but I need to put an id on the target div to be collapsed.

Using the Layout component in the Search UI code, I see I can make the Results, or the Search Bar area collapse. But I really want collapse everything under the searchbar area, which is basically the whole sidebar + results + paging + filter areas.  
The class on that area is 'sui-layout-body'.

So, I wonder if anyone has an idea on how I might put an id on the 'sui-layout-body' div. I don't see how I can modify that portion the way I can modify the other areas.  
Any insights greatly appreciated!

Thank you

---

<div class="post-metadata">

**Author:** ![JasonStoltz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jasonstoltz/32/49893_2.png) [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)\
**Post date:** [August 10, 2022, 1:51pm UTC](https://discuss.elastic.co/t/search-ui-how-to-collapse-expand-everything-under-the-search-bar/311778/2 "2022-08-10T13:51:11Z")

</div>

Hi @tonyfam.

I don't think you need to add an 'id' to that element.

I can't help you with bootstrap because I don't know anything about it, but you can target the `.sui-layout-body` with javascript to apply and remove the `collapse` class.

---

<div class="post-metadata">

**Author:** ![tonyfam](https://avatars.discourse-cdn.com/v4/letter/t/6de8d8/32.png) [@tonyfam](https://discuss.elastic.co/u/tonyfam)\
**Post date:** [August 10, 2022, 4:08pm UTC](https://discuss.elastic.co/t/search-ui-how-to-collapse-expand-everything-under-the-search-bar/311778/3 "2022-08-10T16:08:04Z")

</div>

Thank you, Jason!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [September 7, 2022, 4:08pm UTC](https://discuss.elastic.co/t/search-ui-how-to-collapse-expand-everything-under-the-search-bar/311778/4 "2022-09-07T16:08:08Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.