ronthewebdev

Yes, the hero is added by using GeneratePress elements.

The demo site is located here:

https://ronr21.sg-host.com/

You will see the hero on the frontpage.

I want to place another image directly below it by creating a new div and class, but this is where the problem lies.

Thanks

• This reply was modified 3 years ago by ronthewebdev.
• This reply was modified 3 years ago by ronthewebdev.

I will setup a demo site and respond back with a link.

Thanks

Okay, another Dev resolved this by using JQuery and tossed it into a php file.

This is the code they used:

<script>
     let openModal = ''
     function modalShow(id){
         jQuery('#modal-'+openModal).hide();
         jQuery('#'+openModal).prop('checked', false);
         jQuery('#modal-'+id).show();
         openModal = id;
     }
     function modalClose(id){
         jQuery('#modal-'+id).hide();
         openModal = '';
     }
 </script>

So .ride-description is not a child element of .ride-image as shown from the image below:

https://1drv.ms/u/s!Ato5FqmByPPujOIEwrWFf5ooSw64aA

Apparently, every .ride-image element has an input type checkbox child item. So, I guess when the image is selected, that would be the checkbox and then the corresponding .ride-description will display as shown from the screenshot below:

https://1drv.ms/u/s!Ato5FqmByPPujOIDZZJ2410zn8f5Eg

Here is a link to how the html looks using Google Inspector:

https://1drv.ms/u/s!Ato5FqmByPPujOICyllIedkA5dQRCg

Your ridemodal variable has not been declared within the foreach block yet here:

const isHidden = rideModal.style.display === “none”;

Keep getting the following error:

Uncaught ReferenceError: Cannot access ‘rideModal’ before initialization
at HTMLDivElement.<anonymous> (gnet_custom_close_ride_modals.js?ver=1.0.0:16:20)

Thanks for the help, I appreciate it.

I will try this code out and let you know.

Okay thanks.

I have the following code now that works somewhat, but I have to click an image twice for the popup to display, but it goes away immediately:

CODE

let rideImages = document.querySelectorAll(".ride-image");
let rideModals = document.querySelectorAll(".ride-description");

// Adding click event listener
rideImages.forEach((rideImage) => {
  rideImage.addEventListener("click", function () {
    rideModals.forEach((rideModal) => {
      let isHidden = rideModal.style.display === "none";
      if (isHidden) {
        // Display hidden element
        rideModal.style.display = "block";
      } else {
        // Hide element
        rideModal.style.display = "none";
      }
    });
  });
});