Question

Check this code.

<li>one <a href="#" class="opt">delete</a>
        <div class="popup">
            <span class="tip"></span><a href="#" class="btn">deletebutton</a></div>
    </li>

code used to hide/show div.popup

$('.opt').live('click', function(e) {
    e.preventDefault();
    $(".popup").slideUp();
    $(this).closest("li").find(".popup").stop(true, false).slideToggle();
});

In click delete to open each div.popup but second click on the opened div.popup makes the span.tip to disappear. It does not appear anymore without refreshing page.

$(".popup").slideUp();

I found the problem is due to this code. I’m using this code to hide all other opened .popup on click of any delete anchor. I’m new to jQuery. Can anyone suggest an alternative method to hide div.popup siblings on click on any.

Thanks..

Answer 1

The problem is that during slideToggle jQuery is changing the popup element to have “overflow-x: hidden” thus the tip element, which is outside of the bounds stays hidden. I made an update to the jsfiddle so that it includes the tip element inside of the popup div. The animation looks a little different but I’m sure you can get it to look like it used to with a little finessing. http://jsfiddle.net/6vKct/5/ (I changed the tip to have a blue background so that it’s more visible)

I changed

• the popup div top from “20px” to “15px”
• the tip div top from “-5px” to “0px”
• made the btn element relative positioned
• moved the btn element down by setting the top to “5px”
• moved the background color style from the entire popup div to just the btn

In effect I just made the popup div larger, moved it up and moved the tip inside of it.