How to Toggle On/Off the Visibility of UI Elements
The SearchTools button is a SmartHub component that enables you to toggle on/off the visibility of the UI elements that are inside the HTML div tag with the class: "header-info": <div class="header-info">.
By default the following UI components will be hidden by the SearchTools button:
- CoveoQuerySummary
- CoveoSort
- CoveoResultLayout
- CoveoResultsPerPage
- CoveoPager
- CoveoErrorReport
You can change what UI Components will be hidden by the SearchTool button by editing the page HTML, looking for the <div class="header-info"> container and updating the HTML inside it.
-
To enable the SearchTools button you have to add inside the page HTML the CoveoSearchTools component:
-
<div class="CoveoSearchTools"></div>
-
-
By default the SearchTools button hides the UI elements from the "header-info" (on page loading the UI elements are hidden and a click on the SearchTools button is required to make them visible).
-
You can change the default state by adding data-default-state="expanded" on the CoveoSearchTools component:
-
<div class="CoveoSearchTools" data-default-state="expanded"></div>
-
Configuration
| Setting | Default Value | Description |
|---|---|---|
| default-state | collapsed |
Set's the default visibility of the elements withing "header-info". It can have one of the two values:
|