Toggle show and hide classname of group via javascript

1

Hi everyone,
I use javascript to run toggle show and hide a group (with classname) on Hype but it not run.
This is my demo file.testclassnamedgroup.hype.zip (10.3 KB)

Help me please

2

You are creating an array of elements (that only has one element in it but it’s still an array)

You would have to target that element like “element[0]”

element[0].style.display = "none";

I would avoid using “element” as the variable reference as it is already passed as an argument and if you change it … you may find problems down the line.

I also don’t understand the logic behind why you have chosen to use “getElementsByClassName” to get the object unless you will have more than one. If you only have one to get but don’t want to use the ID perhaps try

var el = document.querySelector(".classnamegroup");

that way you won’t have to use “element[0]” you can just use what you have. (i.e “el.style.display = …”)

By the way, If you want to hide more than one element (with the same class name). You would need to loop through the array that is created and then run the same code on all elements. Look up a “for” loop.

3

Sorry I dont get it.
Can you share me Hype file demo?
Thank you so much.

4

this is relatively basic javascript … if you don’t understand it then maybe a little more learning before you venture into it. :wink:

var element = document.getElementsByClassName("classnamegroup");
	
       if(element[0].style.display == 'block')
          element[0].style.display = 'none';
       else
          element[0].style.display = 'block';
5

Thank you but it not work when next scene with the same classname.

6

That’s why I explained the way I did in my first post. You need to understand Javascript a bit more. You are creating an array. If you have more elements with the same class name, you will have something like

‘’‘
element = [“elementFromScene1”, “elementFromScene2” ]
’’'
Then to access the element in scene 2 you need to use “element[1].style.display =…”

I would use a different approach

7

Two other things to note:

  1. I would not use the eye icon for visibility. That is an editor control and we could definitely choose not to export in the future. Instead use the Display or Opacity setting in the Element Inspector.

  2. You may not need to do this via code; you can have an action fire an alternate timeline that can animate/change the display setting.