fbpx

Tutorial

Elementor Click to show anything

Uses Plugins

Elementor PRO

Description

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.

1

Add Trigger links to the page

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.

  1. Add an Icon List Widget to the page
  2. Set the class in Advanced -> CSS Classes to "click-to-show-triggers"
  3. Set the href of each link / link to #
  4. Set the link attributes to  data-target|targetElementID   - Where targetElementID   is the ID if the Element you want to show on click

 

 

2

Add Target Sections

  1. Add 3 Sections or Containers to the page.
  2. Set the IDs to match the "targetElementID" settings in step 1
  3. Se the Class to "target-section-group" - you may change this to whatever group class you like

 

3

JavaScript Code

  1. Add an HTML Widget to the page
  2. Copy and Paste the JavaScript below into this widget

Code (click to copy)

JavaScript for HTML Widget (javascript)

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