I'm not entirely sure if this is possible and have been unable to find any info on this matter, which isn't giving me much hope, but maybe I can find an answer this way. For some context, my question concerns this page. For reference: I'll be referring to "tabs" in my question, this is about the tabs towards the bottom of that page, not browser tabs.
I'm working on a revamp of the website for the company I work for as a Communications employee. As part of this revamp, we want to place an infographic on the website detailing our work process, and allow users to click it to get information about the step of the infographic they just clicked on. We use Wordpress and a free version of Elementor, which limits my ability to make any changes outside of the front-end that Wordpress/Elementor gives me.
I'm currently using Adobe Illustrator to create an image map of the infographic using Illustrator's Attributes menu, and have been able to use hash signs to make the page jump down to the text about the step by using the div id
of the tab in question. However, in order to make this work, I also need to be able to actually change the open tab on the page. I've figured out that this relies on two HTML attributes needing to be changed:
- The
class
attribute of both the tab that needs to close and the tab that needs to be opened needs to be adjusted. A closed tab useselementor-tab-title elementor-tab-desktop-title
, an open tab useselementor-tab-title elementor-tab-desktop-title elementor-active
. - The
aria-expanded
attribute of the tab that needs to close needs to be changed tofalse
, while the tab that needs to be opened requries the attribute to be set totrue
.
Is there any way to pull this off using the URL? If not, what other methods can I use, given the limitations of the system I'm working with?
I've searched across the internet for solutions, taken a look at Elementor-focused tutorials, and searched Stack Exchange. While I have found solutions that involve JS/JQuery scripting, this is unfortunately not possible due to the limitations of the software I'm working with. If there's something that involves a URL, I can use that through image mapping, which should allow me to work around these limitations.
from Changing HTML attribute with URL
No comments:
Post a Comment