Responsive Tabbed Content (a tutorial)

Show and tell
,
1

For those looking to create responsive tabbed content, in a very simple way check this out!
https://melwiersma06.wixsite.com/mysite-2
You can have as many tabs as you like, the code is duplicated.
Step 1: Depending on how many tabs you would like to have create the appropriate number of buttons for them. (In my case I have 3)

Step 2: You’ll need to create the same number of container boxes for each content topic. (You can make them any style you’d like) You can fill them with any content that you would like, text, pictures, videos, etc., you just need to make sure that each content piece is attached to their appropriate box. (it will light up blue when you do it)

Step 3: You may run into the same thing as I did for this: You want to sort of layer the boxes on top of each other. You’ll find that if some boxes are smaller and some are bigger it will try to attach them to each other. You can eliminate this by the following: 1. Either make them the same size so it isn’t possible for the boxes to attach and leave them that way or if you want them different sizes you can adjust the size of each box after you layer them.

Step 4: *VERY IMPORTANT You need to make sure that your boxes are “hidden upon load” Now, you can leave one of the boxes (say your main details) un hidden so that that box will be there when the page loads, but it’s up to you. Note that that is the third section of code

Step 5: In the properties pane you’ll want all of your boxes to be set to “on click” then by using code we can tell that click what to do.
Step 6: Coding. (This code is duplicated, so I will explain in once.)
You’ll notice when you activate the “on click” event a line of code automatically appears. This is where we will manipulate our code from.
To start: this is the line that automatically appears: export function button1_click() {
So when we click this button we want 2 things to happen:

  1. We want the first box to open
  2. We want all of the other boxes to close. (This way the content doesn’t overlap and look weird)
    This is what this looks like:
    export function button_1 click() {
    $w (‘#box1’) .show ();
    $w (‘#box2’) .hide ();
    $w (#box3’) .hide ();
    }
    That’s it! **Note that I have applied the fade animation to each box. You can do that before coding. It also doesn’t affect the code in any way by applying or not applying the animation. Hope this helps!!
    Again, feel free to look at the site to see what your final product could look like! :smiley:
    Drop a comment, if something doesn’t make sense and I will do my best to explain!
    Cheers!
2 Likes
2

Kudos on a simple to follow tutorial! Several of the others I tried to use went off on random tangents about other things and were impossible to follow. Thanks!

3

Why didn´t you use https://www.wix.com/corvid/reference/$w.MultiStateBox.html ?

4

There’s no need to layer the boxes on top of each other (which’ll only get more and more awkward as the number of tabs increase). You can stack them one after the other and achieve the same layout by collapsing/expanding them.

@giri-zano Hadn’t seen these before. Nice.

5

I’ll take a look. that didn’t show up in my search for tabbed content. I’m a graphics person by trade; learning web out of necessity so I don’t always know the code/technical name for what I’m wanting!

6

@tmorfitt It’s possible you don’t have this feature enabled on your account, as this page suggests it’s not fully rolled out yet.

https://support.wix.com/en/article/corvid-setting-up-your-multi-state-box#add-a-multi-state-box-1

7

Classic Hide and Show does not make content responsive per say. You need to use Collapse and Expand for the action and you should use Stripes for the content (and let the page resize on its own vs changing the size with the handle.)

If you scroll to the bottom of your example page (from a different device or screen size), you will find a large white gap of empty space.