Hello

I have a client that wants the map function just like this:

https://www.lifestorage.com/storage-uni … ady-acres/

I was hoping one of the smart forum folks could let me know how to do it

Thanks!

It appears this is just adding and removing a class on click which effects the opacity of the map image.

This is something I have worked on, adding and removing classes within RSD. I have developed a script (with the help of Eric) and have been modifying it to work with mouseovers, hovers, and now onclick.

It uses the script to find the button id and toggle any element with a classname and the classname "togon". The element must also have a data attribute "data-tog" with the value "nest1". Each element that has the "togon" class must have a unique id also for this to work. Since the "togon" class is being removed you can set the css settings for that state by "greying out the "togon" class and making your settings. Ungrey the "togon" class and you can set the state for the toggled on condition. Usually you must adjust something in both states for the settings to take effect.

More complex settings can be made by duplicating the element and then deleting the "togon" class. You then have a visual for both states. When you are done adjusting both visual states, just delete the duplicated element and like magic......your settings are saved for both states.

This is a very powerful way to toggle multiple css settings on multiple elements or very simple ones. If any additional animations are needed, one can simply modify and add a new script with a different id trigger and then change the data-tog value to nest2 for example. A new nest or group of elements that are triggered off a new element id.

Hey Twin

Thanks - I sort of get it. Do you a video on that set up? When looking I can't seem to find the container contents of both container 1 and 2 and the opacity settings - - I guess I sort of understand the concept but implementation a big no

Byron

Did you add the jquery script after in editor or? Truth be told I am lost past a basic understanding of the concept

The opacity change occurs on the container with the classes "container-2" and "togon". When both classes are blue the opacity setting found under effects is "1". Now grey out the class "togon" (which disables any css changes to it) and then look at the opacity setting. It is now ".43".

The script is used inside RSD in the footer section of the Page Settings. The script just removes the "togon" class which is the same as greying it out or disabling it to achieve the required animation effect of toggling the opacity changes.

If you export the project you can open the main.css folder and see this:



It shows the opacity change for the container with "togon" and without "togon"

SInce the example link you provided uses a button click, I should also mention the really cool feature Foundation 6 has - the Toggler. You can toggle a CSS class by adding two attributes data toggle and data-toggler. I eliminated the jquery script and just used the data toggle method to control the opacity.

Here is the link to learn more on how to use data-toggle....

http://foundation.zurb.com/sites/docs/toggler.html

Thanks - working on it!