You are currently viewing Show Content On Click or Hover – Elementor, CSS and JS Tutorial

Show Content On Click or Hover – Elementor, CSS and JS Tutorial

(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)

Get Elementor Pro

Click to Reveal or Hover to Reveal with Elementor, CSS and Javascript JS

In this tutorial, we will replicate an apple page effect that I found. You can check the above video to see the effect. This design allows us to add more content behind each container. This leads to users on clicking on the content information that they have priority on.

Personal Website

Visit Portfolio   

Recommended Web Creation Tools

Learn More   

Youtube Channel

@DMmotionarts   

Stores

Teepublic Store
Redbubble Store

Recommended Web Creation Tools

Learn More   

Personal Website

Visit Portfolio   

Full Code for Show/Hide Content Effect – Elementor

  1. dm-click-container is the CSS class of the parent container. We have added the click event to capture on this container.
  2. dm-click-container-active is the CSS class that is dynamically added by our javascript. It only gets added on the clicked container.
  3. dm-click-front is the CSS class of the front content container. It is inside dm-click-container.
  4. dm-click-front-active is the CSS class that is dynamically added to the front container. In this code, we basically hide it by making opacity 0 so that it does not bleed through edge.
  5. dm-click-back is the CSS class of the back content container. It is inside dm-click-container. It is given opacity 0 by default as we don’t want it to be visible. The z-index is also lower than front container to place it at the back.
  6. dm-click-back-active is the CSS class that is dynamically added to the back container. In this code, we make it’s opacity to 1 and also increase it z-index to higher value so that it gets visible and content is selectable.
  7. You can change the EventListenter to ‘mouseover’ from ‘click’ at line 74, if you want it to be based on hover instead of click.
<style>

    /*Default Container Styling*/
    .dm-click-container  {

        transition: 0.3s;
        scale:1;

    }

    /*Active Container Styling*/
    .dm-click-container-active {

        transition: 0.3s;
        scale:0.95;


    }

    /*Default Front Container Styling*/
    .dm-click-front {

        transition: 0.3s;
        opacity: 1;
        z-index: 2;


    }

    /*Active Front Container Styling*/
    /*This is added to remove front container that gets visible at edges*/
    .dm-click-front-active {

        transition: 0.3s;
        opacity: 0;

    }

    /*Default Back Container Styling*/
    .dm-click-back {

        z-index: 1;
        transition: 0.3s;
        opacity: 0;
    }

    /*Active Back Container Styling*/
    .dm-click-back-active {

        z-index: 3;
        transition: 0.3s;
        opacity: 1;

    }

</style>

<script>

    //Get all Containers
    const dmClickContainer = document.querySelectorAll('.dm-click-container')

    //Get all Front Containers
    const dmClickFront = document.querySelectorAll('.dm-click-front');

    //Get all Back Containers
    const dmClickBack = document.querySelectorAll('.dm-click-back');


    //Loop through all containers
    dmClickContainer.forEach((dmClickElement, index) => {

       //Add Event Listener to all containers
       dmClickElement.addEventListener('click', () => {

        //2nd Loop for containers to remove active class
        dmClickContainer.forEach((dmClickElement2) => {

             dmClickElement2.classList.remove('dm-click-container-active');
        });

         //Add active class only to clicked element
          dmClickElement.classList.add('dm-click-container-active');

          //Loop through all back containers and remove active class
          dmClickBack.forEach((dmBackElement) => {

              dmBackElement.classList.remove('dm-click-back-active');

          });

          //Add active class to back container of same index as clicked container
          dmClickBack[index].classList.add('dm-click-back-active');

          //Loop through all front containers and remove active class
          dmClickFront.forEach((dmFrontElement) => {

              dmFrontElement.classList.remove('dm-click-front-active');

          });

          //Add active class to front container of same index as clicked container
          dmClickFront[index].classList.add('dm-click-front-active');

       });

    });

</script>
Get Elementor Template

Leave a Reply