Show/Hide multiple elements on same page

Using JavaScript with Hype
1

Hi everyone,

I hope someone can help me in my query (designer by nature, <novice coder).

The page I am building will have roughly 30 buttons. Every button needs to show/hide a text box with the button’s description. On the same token, whilst one description is showing, the others cannot show to hide this one (or if they do, if I tap on one of the hidden ones they need to come to the top).

I’ve been searching on the internet and through the hype forums and cannot find a guide to do this.

Could someone help, please?

Thanks in advance.

2

if i understand correct - you can create a textfield. on buttonClick you can change the innerHTML of this textbox. so everytime only the text for the clicked button is shown. you can do this by using javascript or even timelines only

1 Like
3

innerHTML sounds about right, i’ll have to search more :slight_smile:
30 buttons with individual innerHTML values to be displayed/hidden in textfield…

5

Thank you. i will look into it as soon as i get home. i am trying to avoid timelines. will it be easy to understand by a total noob?

6

This is an example that has both ways. Timeline / Code.

It’s up to you how easy it is to understand :smiley: :wink:

changeTextBoxOnClick.zip (31.7 KB)

2 Likes
7

Thanks! i’m special… :slight_smile:

8

No probs! Btw, my version is very similar to @strmiska’s version but with the added code step.

9

Thanks!. I just looked at the coded way. I’m using it! is else if still okay with 30 buttons?

10

Change the code to

var desc = hypeDocument.getElementById('desc');
	
changeText("btn1", "Coded Description 1");
changeText("btn2", "Coded Description 2");
changeText("btn3", "Coded Description 3");
// ...changeText("btn30", "Whatever description!");
	
function changeText(id, text){
	if(element.id === id){
		desc.innerHTML = text;
	}
}

This will make it easier and less code.

1 Like
11

thank you so much!!!

12

I changed it and worked like a charm! however, if i add scenes and try to run the same on the new scene it doesn’t load.
am i missing something?

13

You would have to change the “desc” to a different id. In the Identity Inspector Panel you will see an area like this

FF85866A-48CF-4206-8EBD-04D72617A964

It will be empty in your new scene. You will need to put in an ID and then change the code to include this new ID

var desc = hypeDocument.getElementById('YOUR NEW ID');
	
changeText("btn1", "Coded Description 1");
changeText("btn2", "Coded Description 2");
changeText("btn3", "Coded Description 3");
	
function changeText(id, text){
	if(element.id === id){
		desc.innerHTML = text;
	}
}
2 Likes
14

Thank you, again!

15

DBear,
I’m in need of your ninja js skills again!

The code you provided has worked great, but I was wondering if you can help with a small tweak.
Instead of innerHtml show/hide how can I change this to show/hide a shape?

I was thinking of having a list of 20-25 items on the right of a large image and tapping on an item on the list will highlight it on the image to the left.

Thanks in advance!

16

I wouldn't use this exact method to do what you ask :wink:

If you can offer more (or build a doc with the components) then it would be easier to see exactly what you need to do. What are the items on the list? and what does "highlight" mean in this context?

17

The plan is to have an image on the left half of the screen. A map.
On the right half I would have a list of buttons.
When the user taps on a button from the list, the corresponding location on the map is highlighted.
I was planning on having a hidden rectangle overlaid on those locations so when the user taps the button on the list, the rectangle will appear on top of the location highlighting it at 50% opacity.

Sorry it’s hard to describe things when a 1 yr old and 3yr old are fighting :slight_smile: .

18

No Worries. Having more information means the code may or may not have to change and it would be more specific to whatever the problem that needs to be solved. And also whether or not you need code.

UPDATE: revealOverlayedElements.zip (72.9 KB)

@petesavva it's easier to show with an example :wink:

1 Like
19

Thank you Sir. Much appreciated.

20

awesome!!! you rock!

1 Like
21

is it possible to make the overlay that’s visible disappear when the new button is pressed? (in lieu of pressing hide)

Thanks again!