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.

6

Hi Saqrio! Thanks for the code.

I’m working on using this code for a portfolio and was wondering on how to implement it correctly.

For reference: I have about 12 preview images per page that will appear when clicking the thumbnail that I need to disappear when a viewer clicks a different thumbnail.

Let’s call the trigger/thumbnail thumbnail1-12 and the larger image preview .preview1-12.

First: am I putting this code into the body or the widget? (thumbnail image/trigger)

If so, is my understanding of the code below correct? I am assuming I will be pasting this code multiple times and changing the fields to be:

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

And so on with thumbnail2 + preview2… in each instance I list the .thumbnail as a query and the .preview I want it to show. From my assumption of your comment, I do not need to list the items that should be hidden.

Thank you, I have very light knowledge of Java and so want to make sure I use this correctly!