This video is in answer to a question in the Elementor Facebook Community. It shows a way to link anchor (triggers) to a group of elements, kind of like an Accordion. The difference is that the target elements can be anything at all and anywhere on the page. E.g. The targets may be Sections, Containers, Columns, Widgets or custom code.
The example uses an Icon List Widget. The class names are specific to this test set of triggers and targets. Use your own class names to group them how you like.
<script>
;((d)=>{
class ClickToShowGroup {
constructor(triggerSelector, targetSelector) {
this.triggerSelector = triggerSelector;
this.targetSelector = targetSelector;
this.targetCollection = document.querySelectorAll(targetSelector);
this.initTriggers();
}
initTriggers(){
this.triggerCollection = document.querySelectorAll(this.triggerSelector + ' a');
this.triggerCollection.forEach( anchor =>{
if(anchor.dataset.target){
anchor.addEventListener('click', (e)=>{
e.preventDefault();
const {currentTarget} = e;
this.hideAll();
this.showTarget(anchor.dataset.target);
})
}else{
console.log('No data-target set: ', anchor.dataset);
}
})
}
hideAll(){
this.targetCollection.forEach( el => {
el.classList.remove('show');
})
this.triggerCollection.forEach( anchor => {
anchor.classList.remove('show');
})
}
showTarget(target){
document.querySelector('#' + target ).classList.add('show');
document.querySelector('[data-target="' + target + '"]').classList.add('show');
}
}
d.addEventListener('DOMContentLoaded', ()=>{
const clickGroup = new ClickToShowGroup( '.click-to-show-triggers' , '.target-section-group');
})
})(document);
</script>
<style>
a.show{
font-size: 1.3rem !important;
color: green;
}
body:not(.elementor-editor-active) .target-section-group:not(.show){
display: none;
opacity: 0;
}
body:not(.elementor-editor-active) .target-section-group.show{
animation: show-fade-in 0.6s;
display: block;
}
@keyframes show-fade-in{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
</style>