The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript jQuery: Hide an element after a certain amount of time or mouse moves away from container

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #31226


    I have a list of radio buttons inside a DIV, this DIV slides down when I click on a < span > element.

    Now, when I select one of the radio buttons, the text in the < span > is replaced and the DIV slides back up.

    So far so good.

    What I need help with is, if the user either doesn’t take any action (does not select a radio button) or moves his mouse away from the DIV containing the radio buttons, to make that DIV with the list of radio buttons slide back up.



    Here’s my jQuery to toggle the slide of the DIV “radio-btns-wrapper” once a selection has been made, and to replace the text inside the “selected-search” < span >:

    $('.selected-search').addClass('selected-search-wjs').removeClass('selected-search').append('Please Select…').click(function() {

    $('input[type=radio]').click(function() {

    Any help with this is greatly appreciated.



    Well, a clear head in the morning does marvelous things.

    Here’s the solution, all I needed to do was to create another function using the .mouseleave method:

    $('.radio-btns-wrapper-wjs').mouseleave(function() {

    Now, I was using .mouseout but it didn’t work because the container DIV had child elements in it, so once you hover over them the DIV would slide back up.

    So I found this simple explanation about why and how to solve it:


Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.