Toggle the Visibility of UI Elements

Overview

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

Change UI Component Visibility

You can change what UI Components are hidden by the SearchTool button by editing the specific HTML page.

  • Update the HTML code inside the container <div class="header-info"> as follows:

    • To enable the SearchTools button add the CoveoSearchTools component to the page: 

      • <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

      • Clicking the SearchTools button is required to make the UI elements 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:

  • collapsed: The UI elements are hidden.
  • expanded: The UI elements are visible.