Hi all, I am trying to get a button to act as a toggle and when clicked, it will display symbols with a class of "office" but for the life of me and ai I can not get this to work. Can anyone take a look at see if I am even close? I am hoping to get this working and then be able to expand on it by adding labels and more locations etc.
Appreciate any help- Thank you.
Jim
offices-nteractive-test copy.zip (166.1 KB)
offices-interactive-test_kt.zip (169.0 KB)
Too much function in your function 
Just keep it simple. And - did you look at the console? You would have seen an error message...
wow thanks! Appreciate it! Now if I can make the button stay toggled "on"... That would make it perfect. Any ideas for the best approach?
dang! I hadn't even considered that, appreciate it, that's a lesson learned for me! I do that in other web project, hadn't considered it here
Thank you.
Not sure, what exactly you mean by this... 
Sorry Kalle, I'm sure that was clear as mud lol. So I am hoping to get the button to work as a toggled state, like a check mark, so if it's selected, it stays on, then it can be deselected. Hopefully that makes more sense.
BTW, except for the "toggle state" I have this thing heading in the right direction now, I have tested adding more locations and it's just great thank you.
Alright, then you first need to say goodbye to the hype button hover effect. I have now used a regular rectangle that functions as a button. There is now a function 'mouseOver 'for the hover effect and a function 'mouseOut'. The variable 'toggleStatus' is initialized in mouseOver. It changes its value on Click to '1'. Depending on its value (0/1), the button responds.
And of course, you don't need the queries in the click function anymore because you don't want to switch back...
if (toggleStatus == 0) {
document.querySelectorAll('.office').forEach(function(symbol){
symbol.style.display = 'block';
});
}
toggleStatus = 1;
offices-nteractive-test_kt1.zip (168.7 KB)
Adapting my checkbox symbol from this post, makes this pretty simple.
And also gives the ability to point to more toggle/checkbox symbols.
offices-nteractive-test_MH1.hype.zip (170.0 KB)
In this adaption. I have set a rect to change opacity when the toggle happens.
The mouse over and out colour is on the containing group.
Here is a multiple one.
We duplicate a toggle symbol change its text label name, and give the 'check' group another additional attribute data-type which reflects the class names of the dots.
offices-nteractive-test_MH2.hype.zip (172.7 KB)
Thanks Kalle, this looks good too I'll plY round with it appreciate your help!
HI Mark, wow yes this is really great thank you! I'll play around and see if I can wrap my head around it all.
Thank you, I appreciate your time and help with this.
-Jim
Looks like the problem is solved. But if not, here's a Map tutorial with Hype…
thanks for this! I'll have a look!
I have been playing around and running with the first version from @ktewes I imagine I have made this harder than it needs to be, but what do you all think? (If you don't mind taking another look)
Thanks,
Jim
offices-interactive-test_02.zip (160.7 KB)
here is yet another approach
offices-nteractive-test-max.hype.zip (177,6 KB)
Max! Wow that's elegant! Thanks for setting this up. This community rocks!
-Jim
Yet another version. I would approach it like this: display type (office or innovation), click status, and button color are defined as HTML attributes on the button. This version also takes into account the original requirement that the button should no longer be clickable after the first click (if I understood this requirement correctly).
Changed the code a liite bit...
offices-nteractive-test_kt2.zip (168.4 KB)
Thanks Kalle— I think between your first one and a couple of others, I am there. Thank you!
#1] HELP! My Map Doesn’t Work! (Managing Map Layers With HTML, CSS, and JavaScript)