Show Hide Elements
Show/Hide one or more elements based on fields in CMS collection
%20(1).png)
All Snippets
Use case 1 - Elements on a Dynamic Item page
Show or Hide one of more elements based on the fields of an item data in the CMS collection
Use case 2 - Elements inside repeater connected to a dataset
Shor or Hide one more elements inside a repeater item based on the fields of an item data in the CMS collections.
The code checks whether a field value is empty or a boolean type field is unchecked.
New to our site? Please see our quick tutorial on how to work with our snippets
Setting | Description |
|---|---|
repeaterId | For Dynamic List page, add the repeaterId of the items. For Dynamic Item page, set it to repeaterId: null |
datasetId | Dynamic datasetId of the list or item page |
elements | One or more elements that need to be hidden or shown. Provide elementId of each element and the fieldId of the field from the collection that you want to check for visisbility. |
collapse | Whether you want to addtionally collapse the elements on top of hiding them. Set it to true or false. |
$w.onReady(() => {
ShowHideElements({
repeaterId: '#repeater7',
datasetId: '#dataset1',
elements: [
{ elementId: '#text1', fieldId: 'title' },
{ elementId: '#text2', fieldId: 'website' }, // add or remove these lines for each element
],
collapse: false
})
})
async function ShowHideElements({datasetId:e,repeaterId:n=null,elements:t,collapse:d=!0}){
const s=$w(e);if(!s?.id)return;await s.onReadyAsync()
;const a=async(e,n)=>t.forEach((({elementId:t,fieldId:s})=>{const a=e(t)
;if(!a?.id)return;n&&n[s]?(a.show(),a.expand()):(a.hide(),d&&a.collapse())}))
;if(n){const e=$w(n);if(!e?.id)return;e.onItemReady(a)
}else a($w,s.getCurrentItem())}
Title
Title