Use components only on specific tabs

This is for:

Developer

When building a search interface, you might want to show components only when a user selects a specific tab.

To do so, add the data-tab or data-tab-not options on any HTML element inside your Search Interface (see Coveo SearchInterface Component). The element doesn’t need to be a Coveo component.

For more information on the specific syntax to use, see Coveo Tab Component.

Facets are already not displayed when no result fits their criteria. For this reason, you usually don’t need to add the data-tab or data-tab-not option on facets.

The following use cases present examples on how to use the data-tab and data-tab-not options.

Displaying help text only when a specific tab is selected

In your search page, you have a few different tabs.

You want to display helpful text to your users to let them know, when they’re not on your All Content tab, that they’re not viewing all of the available content.

To do so, you choose to use a simple div element with the help-text class.

The markup for your text box would look like this:

<div class="help-text" data-tab-not="All">
You're not currently viewing all of the available content. To view all the content, select the <strong>All Content</strong> tab.
</div>

Displaying different facets based on the selected tab

In your search page, you have three tabs:

  • All Content, which shows your documentation pages as well as all of your products

  • Knowledge, which only shows documentation pages

  • Products, which only shows your products

When a user is on your All Content tab, you want to display all facets.

However, when a user selects the Knowledge tab, you want to display only the FileType and Author facets.

Finally, when a user selects the Products tab, you want to display only the Year facet.

The markup of your search page would look like this, with certain sections skipped for brevity:

<body id="search" class='CoveoSearchInterface'>
  <div class="coveo-tab-section">
    <a class="CoveoTab" data-id="All" data-caption="All Content"></a>
    <a class="CoveoTab" data-id="Knowledge" data-caption="Knowledge"></a>
    <a class="CoveoTab" data-id="Products" data-caption="Products"></a>
  </div>
  <!-- ... -->
  <div class="coveo-main-section">
    <!-- ... -->
    <div class="coveo-facet-column">
      <div class="CoveoFacet" data-title="FileType" data-field="@filetype" data-tab="All,Knowledge"></div>
      <div class="CoveoFacet" data-title="Author" data-field="@author" data-tab="All,Knowledge"></div>
      <div class="CoveoFacet" data-title="Year" data-field="@year" data-tab="All,Products"></div>
    </div>
  </div>
</body>