Getting accordion menu to automatically open

  • 1
  • Question
  • Updated 8 years ago
  • Answered
I'm setting up an accordion menu on my frontpage. It works fine but I want it to slide open when the cursor just goes over it, rather than it needing to be clicked.

Is there a way to manipulate the HTML code to achieve this? I think its called a "mouseover"
Photo of Chris Loughrey

Chris Loughrey

  • 11 Posts
  • 0 Reply Likes
  • unsure

Posted 8 years ago

  • 1
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hello Chris,
I am going to forward this thread to a colleague of mine who will be better equipped to help with this. She's not currently online, but when she comes back she will be able to assist further. We appreciate your patience.

Emmy
Photo of Kershnee

Kershnee

  • 2087 Posts
  • 152 Reply Likes
Hi Chris,

Please can I have the URL of your site to investigate further. Is the accordion menu already on your page?
Photo of Chris Loughrey

Chris Loughrey

  • 11 Posts
  • 0 Reply Likes
Hi Kershnee,

the URL is www.my-personaltrainer.net, the accordion is on the main page on the right, as "latest news and articles". I'd just like it to open without having to be clicked, if thats possible.

Thanks for your help

Chris
Photo of Kershnee

Kershnee

  • 2087 Posts
  • 152 Reply Likes
Thanks for this info, Chris. Looking into it and will get back to shortly.
Photo of Chris Loughrey

Chris Loughrey

  • 11 Posts
  • 0 Reply Likes
Just wondering if you've had any luck with altering the code?
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
where it says:

turn into :
Photo of Kershnee

Kershnee

  • 2087 Posts
  • 152 Reply Likes
Hi Chris,

My apologies for not getting back to you on this. Add the following piece of code to the end of your accordion menu code:

<script>
runAccordion(1);
</script>

I have tested this and it definitely works. Please remember to republish your site to see the changes on your live site. You can republish your site by clicking on the green "Publish to the web" button.
Photo of Chris Loughrey

Chris Loughrey

  • 11 Posts
  • 0 Reply Likes
Hi kershnee, thanks for the code. Small problem, it opens the menu when the page is opened, I was hoping for something to that keeps it closed when the page opens but opens the menu when the cursor is dragged over it (without actually clicking on the menu).

I've seen a similar effect in a JavaScript menu on the yola test site but I was having a lot of trouble setting that up and found this accordion menu easier to work with.

Sorry for being so picky!
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
where it says:<div onclick="runAccordion(1);">
turn into:<div onmouseover="runAccordion(1);">
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
if you want it to close wen the user mouses out, use this:<div onmouseover="runAccordion(1);" onmouseout="runAccordion(1);">
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
this should work
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
oh yeah, if you use :<div onmouseover="runAccordion(1);" onmouseout="runAccordion(1);">, remove the <script>
runAccordion(1);
</script>

, or it is going to cause confusion
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks so much Kevin!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Chris

Please let us know if you still have trouble after following up on Kevins' suggestion.
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
your welcome Sanja
Photo of Chris Loughrey

Chris Loughrey

  • 11 Posts
  • 0 Reply Likes
Thanks for the advice Kevin. I'm using the:

div onmouseover="runAccordion(1);" onmouseout="runAccordion(1);"

code which works very well, the only issue is that I want users to be able to use the scroll bar in the menu to go down and select links in the list. However, when the mouse cursor moves away from the title bar the accordion closes & none of the links are able to be accessed.

Can this code be expanded to include keeping the menu open when the cursor is over the entire open accordion but that it auto-closes when the user mouses out from that area?

Sorry for being so hard to please! thanks for all of your efforts.

Chris
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Chirs, first of all I see you did this;<div onmouseover="runAccordion(1);" onmouseout="runAccordion(1);</script>">
Do this: <div onmouseover="runAccordion(1);" onmouseout="runAccordion(1);"> .
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
I can't really find a solution for that, so the best solution is to close the accordion menu after a certain number seconds when the user mouses out. Here is one that closes 5 seconds after the user mouses out. <div onmouseover="runAccordion(1);" onmouseout="setTimeout('runAccordion(1)',5000);"> Just change the bolded part. Remember, it has to be in milliseconds, so if you want to change to 6 seconds, write 6000, not 6.
1 second=1000 milliseconds






Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
the thing is that if the user mouses over the button again, the entire thing will mess up.