---
title: Use many folding components
slug: '2719'
canonical_url: https://docs.coveo.com/en/2719/
collection: javascript-search-framework
source_format: adoc
---
# Use many folding components
While it's possible to have many [`FoldingForThread`](https://coveo.github.io/search-ui/classes/foldingforthread.html)/[`Folding`](https://coveo.github.io/search-ui/components/folding.html) components in the same search page, there can only be one such component per [`Tab`](https://coveo.github.io/search-ui/components/tab.html).

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](https://docs.coveo.com/en/508/)).

**Examples**

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

```html
 <!-- ... -->

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

 <!-- ... -->
```

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

```html
<!-- ... -->

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

<!-- ... -->
```

> **Leading practice**
>
> 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](https://docs.coveo.com/en/2718/).