Is it possible to $w('#multiple items').action... in one line?

Hi everyone.

Simple question, but I can’t find the answer.
Here’s what I’m trying to do.

else if ($w( “#dropdownJ” ).value === “04” ){
$w( ‘#box12’ ).hide();
$w( ‘#box14’ ).show(); <---------THIS WILL BE SHOWN, but hide everything else.
$w( ‘#box15’ ).hide();
$w( ’ #box16 ’ ).hide();
$w( ’ #box17 ’ ).hide();
$w( ’ #box18 ’ ).hide();
$w( ’ #box19 ’ ).hide();
$w( ’ #box20 ’ ).hide();

…all the way down to

$w( ’ #box70 ’ ).hide();

And I have to repeat this 60 more times. Once per box.
So it would be a whole lot easier if I could just use a range selection instead of one by one.
Is it possible to use something like this instead of have one line per box to hide a box?
$w( ’ #box15 ’ - ’ #box39 ’ ).hide();
It doesn’t give me an error… but it also doesn’t work in hiding those boxes when I use the minus/tac mark.

Thank you in advance.

What you are trying to do is mentioned on this page here.
https://support.wix.com/en/article/corvid-tutorial-hiding-an-element-on-certain-pages

If you want to hide other elements, just add all their element IDs to the line of code, like this:

// Hides these elements when the page loads
$w("#myElement, myElement2, ...").hide();

That kind of works.
Thank you.

So this is what I ended up writing:

else if ($w( “#dropdownJ” ).value === “03” ){
$w( ‘#box11’ ).hide();
$w( ‘#box12’ ).hide();
$w( ‘#box13’ ).show();
$w( ‘#box14,#box15,#box16,#box17,#box18,#box19,#box20,#box21,#box22,#box23,#box24,#box25,#box26,#box27,#box28,#box29,#box30,#box31,#box32,#box33,#box34,#box35,#box36,#box37,#box38,#box39’ ).hide();

As far as the last $w line, there really isn’t a way to make a range selection?
I would just have to do ,element, element, etc. Is that correct?

Correct.

But if it is that much content … have you considered creating a database for it? Connecting it to a repeater? Then filterimg the content to show the 1 matching result instead?

That is the suggestion I can offer without really understanding your goal or existing design layout.

How about something like this:
elseif ($w( " #dropdownJ " ).value === “03” ){
for ( let i = 1, i++, i<71) {
if ( i== ($w( " #dropdownJ " ).value ) $w( [#box1](https://www.wix.com/corvid/forum/search/~num~box11) +${i} ).show();
else $w( [#box1](https://www.wix.com/corvid/forum/search/~num~box11) +${i} ).hide;
}
}

I see. Thank you.

Yes, I did build it using a database with the content manager at first, but it does not work for my case because my site is in English and Japanese. And it is not possible to control the translation for items in a database.

This is what I’m doing.
First, I only need this for one page. The page is currently located here:
loveyourcaragain. jp/carsize (I had to add a space after .jp because apparently I can’t post a url)

Two dropdown menus. The one on the left will be in Japanese and sorted the way it would be sorted in Japanese. And one of the right in English listed in alphabetical order. The dropdown will allow you to select your car make/manufacturer. 30 different manufacturer categories. Times x2 since I need it in both languages.
So my code is basically this:

export function dropdownJ_change(event) { <----dropdownJ is the dropdown in Japanese
if ($w( “#dropdownJ” ).value === “01” ){ <-----the first selection of the dropdown will be value 01… and that will make a hidden chart appear that will show Toyota’s models.
$w( ‘#box11’ ).show(); <-----box11 is my chart for Toyota. box12 for Lexus, etc… 30 categories
$w( ‘#box12,#box13,#box14,…all the way up to #box70’ ).hide(); <-------and then hide the rest of the boxes
}

else if ($w( “#dropdownJ” ).value === “02” ){
$w( ‘#box12’ ).show();
$w( '#box11,#box13,#box14,#box15,#box16,#box17,…all the way up to #box70 ).hide();
} <------this would be if the second name, Lexus, is selected… which has a value of 02

And then I have to repeat this another 58 times. 30 for Japanese, and 30 for English. Yes, this means I have 60 hidden container boxes all stacked on top of each other on one page. No, this is definitely not an efficient way. I wish I had a better way… but since I can’t translate with the content manager, I have to do it this way. If there is a more efficient way, I’m all ears.

This looks interesting. Thank you very much though. This definitely sounds like it would make things easier. I will play with this.

I was searching through the corvid documents to try to find certain codes, something like this, but I couldn’t find it.
I don’t know what i++ or i<71 or $w(` #box1 +${i} actually means.
Is there a site that lists all codes on one page? Like, how would I find out what ++ means? Most of the codes that I have on my site, I figured out by finding piece by piece.

syntax error, supposed to be:
for ( let i = 1; i++;i<71) {
That is a “for” loop in javascript.
For string, single and double quotes are essentially the same. Backticks, however, allow us to embed any expression into the string, by wrapping it in ${…} :
https://javascript.info/string#quotes

the whole thing should be:

elseif ($w( " #dropdownJ " ).value === “03” ){
for ( let i = 11; i++; i<71) {
if ( (i-10)== ($w( " #dropdownJ " ).value ) $w( [#box](https://www.wix.com/corvid/forum/search/~num~box11) +${i} ).show();
else $w( [#box](https://www.wix.com/corvid/forum/search/~num~box11) +${i} ).hide();
}
}

Just to add to your choices here, if you can’t get your head around Nayeli’s database idea or Ayleungg’s loop idea.

You can always look at using one or more MultiState Boxes so you would get away with all the containers stacked on top of each other.

See here for more info.
https://www.wix.com/corvid/reference/$w.MultiStateBox.html
https://support.wix.com/en/article/corvid-about-multi-state-boxes
https://support.wix.com/en/article/corvid-setting-up-your-multi-state-box
https://support.wix.com/en/article/corvid-tutorial-working-with-multi-state-boxes-and-code

Also, you can find lots online about using loops if you want to learn more, like these here for starters.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for
https://www.w3schools.com/js/js_loop_for.asp
https://www.freecodecamp.org/news/javascript-loops-explained-for-loop-for/
https://www.geeksforgeeks.org/loops-in-javascript/

Thank you very much for this information.
I will not be able to use Nayeli’s database idea (see above for reason)
I was reading more on loops… until you mentioned multi-state-boxes. I really like this idea. It would save me a lot of time sorting through all 60 charts, and make it more efficient.

I’m still playing around with the multistate boxes. Even though they seem pretty quick, something about them make loading datasets extremely slow. I tested it with just one state and one dataset. But even with just that, on the live page it stays on “loading” for 1-2 seconds. With just 5 states and 5 different datasets, it takes like 20 seconds. You can see for yourself by visiting the page: loveyourcaragain .jp/carsize Select any of the first 5 categories on the left side dropdown. It’s hit or miss on the loading times.
So I think the combination of numerous states + numerous datasets is not that efficient. I will continue to play with this more.

Thank you everyone thus far. This has been really great information, and I’ve been learning a lot more.