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

Elastic Search
1

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

2

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.

1 Like
3

Thank you, Jason!

4

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