Use many folding components

This is for:

Developer
In this article

While it’s possible to have many FoldingForThread/Folding components in the same search page, there can only be one such component per Tab.

You can use the data-tab or data-tab-not attribute to specify in which Tab a given FoldingForThread/Folding component should be active (see Use components only on specific tabs).

  • Making a FoldingForThread component only active when the CommunityForum or InternalForum Tab is selected.

     <!-- ... -->
 
 <div class="CoveoFoldingForThread" data-tab="CommunityForum,InternalForum"></div>
 
 <!-- ... -->

  • Making a Folding component active when any Tab except Documentation or Videos is selected.

    <!-- ... -->
 
<div class="CoveoFolding" data-tab-not="Documentation,Videos"></div>
 
<!-- ... -->

Rather than using the data-tab/data-tab-not attributes to use different result folding components on different content sources, consider using the same folding fields across all sources. A good approach is to use the default folding fields (that is, @foldingcollection, @foldingchild, and @foldingparent), and ensure that:

  • Each @foldingcollection value corresponds to a unique group identifier across all sources.

  • Each @foldingchild value is unique across all sources.

See Folding fields.