Tab like setup - 100>0 opacity trigger

Custom code
1

Hi, I am making a website atm and want to have a tab like content feature which works like so:
There are 4 questions and each time you click on one of the questions a bunch of content for that specific question (images, text etc) pop up next to it. I have managed this part of the set up but have now hit a wall as Readymag only allows 1 type of click trigger for each element. Example Q2 when clicked triggers Q2 images which are all set for a 0>100 opacity and I’d like it that all other questions (1,3,4) disappear go 100>0 if already open.

Is there a line of custom code I could drop into the design to allow this function? or are we looking at needing to create a whole custom code feature?

Thanks for any advice you can provide :slight_smile:

1 Like
2

this sounds like a more complex custom code setup.
But its doable though.

3

Great, thanks for letting me know. Do you know how I could approach this? Any example of code? thanks

4

Hi @Elodie_Tweedie :wave:,

See my opinion to get your tabs working as you want, you will need a bit of custom coding. Here is a basic idea of what you should do:

Assign Unique Identifiers; Make sure each question and its corresponding content have unique identifiers so that they can be easily targeted.

Set Up JavaScript; Use JavaScript to manage the visibility of the content. When a question is clicked, the script should;
Show the content related to that question and Hide the content related to the other questions.

You will need to add a script that listens for clicks on the questions and then adjusts the visibility of the content sections accordingly.

You can usually add this type of script in the custom code section of your website builder, if it supports it.

I Hope the above will be helpful… :blush:

1 Like
5

You can achieve this with a bit of custom JavaScript. Try adding this code to your project:

javascript

document.querySelectorAll('.question').forEach((q, index) => {
    q.addEventListener('click', () => {
        document.querySelectorAll('.content').forEach((c, i) => {
            c.style.opacity = i === index ? '1' : '0';
        });
    });
});

Replace .question and .content with your actual class names. This will hide all other content and only show the one for the clicked question.