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