I am trying to create a sub-menu of position titles that when clicked displays the description as well as a vector image "highlight" that stays visible until another position is clicked.
I currently have the description part showing and hiding at the appropriate times, but my highlight disappears. I think it is due to the fact that I have the highlight showing on mouse_in and hiding on mouse_out. Not sure how to solve this problem without using more vector images that only appear on click, and I would prefer not to because I have 18 positions.
I'm not familiar with how to set the constants as elements that are already on the page rather than images (as in this example: https://www.wix.com/code/home/example/Hide-and-Show-Elements) so I created a function to clear all selection highlights and descriptions before showing the one that was clicked. This works for the descriptions, but I think my mouse_in and mouse_out events prevent the highlight from remaining visible.
Any insight or solutions would be appreciated!
Here's the code:
function hideAllDes(){ //Hide descriptions
$w('#prezDes').hide(), $w('#prezEDes').hide(), $w('#vpDes').hide() }
function hideAllSel(){ //Hide selection highlights
$w('#prezESel').hide(), $w('#vpSel').hide(), $w('#secSel').hide() } //President export function prezTxt_mouseIn(event, $w) { //Add your code for this event here: $w('#prezSel').show() } export function prezTxt_mouseOut(event, $w) { //Add your code for this event here: $w('#prezSel').hide() } export function prezTxt_click(event, $w) { //Add your code for this event here: hideAllDes(),hideAllSel() $w('#prezSel').show() $w('#prezDes').show() } // President-Elect export function prezETxt_mouseIn(event, $w) { //Add your code for this event here: $w('#prezESel').show() } export function prezETxt_mouseOut(event, $w) { //Add your code for this event here: $w('#prezESel').hide() } export function prezETxt_click(event, $w) { //Add your code for this event here: hideAllDes(), hideAllSel() $w('#prezESel').show() $w('#prezEDes').show() }
I published it as-is on my site (www.iowaasda.com/position-descriptions) and it seems like it works some of the time
Update: changed to buttons to achieve the hover (mouse_in/mouse_out effects) and gave up on the selection icon because the mobile version looked like jumbled garbage