Can I create a vertical tab or accordion?

Ask the community
, , ,
1

I’m having trouble with
I’m trying to create a vertical tab or accordion to get additional text on the page without taking up so much space. I’m trying to figure out if there could be a workaround with a button and text box. There will be 3 buttons with 1 paragraph text box. Can I make some of the text boxes hidden until the button is clicked and switch the text over?

Working in
I’m working in Wix Editor. Will this require Dev mode to make some of the text hidden?

Site link
This isn’t live yet, but will be www.solisrecruitment.com/marketing

I want to make it interactive and engaging, and save space on text

2

Based on the link you shared, I take it you want to have the text hidden here?

2025-10-09_15-23-58
2025-10-09_15-23-581920×992 128 KB

There’s a few different options I think you could use. For a more similar view to what you have but without the need for code, you can Wix FAQ since that allows for collapsing questions and answers. It’s not exactly the same layout but despite it being Q&A, you could customize the text being used.

You can also use tabs but then the button would be on the paragraph text.

Another option is using a multi-state box to manage the bullet points and using code to change the state for the points. Here’s a screenshot of the layout and below will be the code.

image
image1035×466 29.5 KB


$w('#button1').onClick((event) => {
     $w('#myStateBox').changeState("State1");
})

$w('#button2').onClick((event) => {
     $w('#myStateBox').changeState("State2");
})

$w('#button3').onClick((event) => {
     $w('#myStateBox').changeState("State3");
})

I made a site where you can see all three in use. https://robertor0.wixsite.com/my-site-5

1 Like
3

Love these solutions @Rob :raising_hands:

And the best part about building a website is there’s usually multiple approaches. I did something similar with a multistate box and a menu component before:

1 Like
4

Hi Rob,

That’s amazing. The multi-state box is the closet to the work around I’m looking to create.

I’ve got a FAQ box on another page, and the horizontal tabs just didn’t look as aesthetic as an option.

Many thanks for sharing your thoughts and the options.

5

Would the vertical menu allow me to change what’s written on the buttons or would it act as navigation for different pages of text?

Bit new to the more customized edits, so would this work like’s Rob’s multi-state box?

6

Almost exactly the same setup as @rob, but instead of buttons, it’s a menu component that uses code to change the multistate box to a different state :slight_smile:

1 Like
7

Using Noah’s example, it would be possible to change what’s written on the menu items. In this case, Noah is doing it with the code.

 label: "Sets",
 id: "sets"

That portion of the code is how he’s doing it with label being what users see listed on the site and id being the name the code uses to work with.

His example is also bit cleaner than mines since he’s using arrays (a collection of values) to manage his. Here’s how the code above I sprung together looks using that principal. You can see how much cleaner it is and shorter it is, plus it’s easier if you wanted to have more buttons.

const buttons = ['#button1', '#button2', '#button3'];
const states = ['State1', 'State2', 'State3'];

buttons.forEach((button, index) => {
    $w(button).onClick(() => {
        $w('#myStateBox').changeState(states[index]);
    });
});

I figured I’d share the above first since it’s easier to understand in case you don’t code that when you press #button1 it changes the state of the multibox to State1.

With the code above, you’re telling the code the buttons could be #button1, #button2 and #button3 and the states are 1, 2, and 3 respectively. Using the variables (the name following const), the code is able to fill in the “gap” and draw from those listed values.

I hope that’s a bit clear and helps demystify both our code. :magic_wand: :mage:

1 Like
8

Thank you both @noahlovell and Rob . My coding ability is basic, so the multi-state box is probably the easiest way to achieve this. I will probably have a play around with the buttons to try and see if I can create a clean version to add to the website.

Both of your suggestions and advice has been helpful. I’m a new user so can only tag one person in to a post at a time.

1 Like
9

Good luck! And we’re around if you need any further guidance :flexed_biceps:

1 Like