Question

I have a div toggled on various links with a close button.
Unfortunately, the close button is not behaving like it should, as its linked with absolute position and so not connected to the div itself. When I put it in position:relative, it adds a new button in the div on every new opening.
This must be peanuts, I know, but myy knowledge is quite basic, so help is much appreciated!
Thanks MrGreen

SCRIPT

$(function(){
    $(".action").click (function(){
        var $this = $(this);
        var target = $this.data('content');

        $('.action').not($this).each(function(){
            var $other = $(this);
            var otherTarget = $other.data('content');
            $(otherTarget).hide(400);
        });

        var cls = $('<div/>', {
            'style':'left:843px;top:15px;width:12px;height:18px;cursor:pointer;padding:3px;position:absolute;border:solid gray 0px;background-color:',
            'id':'cls',
            'text':'x',
            'title':'Close',
            'click':function(){
                var t=$(this);
                t.parent().hide(400, function(){
                    t.remove();
                });
            }
        });

        $(target).prepend(cls).show({height: "toggle"},400);
    });
});

Answer 1

Why are you keeping adding/removing the close buttons?

I’d suggest you use something like this:

$(document).on('click', ".action", function() {
    var $this = $(this);
    var target = $this.data('content');
    $(target).toggle();

    $('.action').not($this).each(function() {
        var $other = $(this);
        var otherTarget = $other.data('content');
        $(otherTarget).hide(400);
    });

    $(document).on('click', '.close', function(){
        $(this).parent().hide(400);
    });

});

Full example here: http://jsfiddle.net/EMYFt/5/

This way, you keep the HTML intact, and just toggle the elements visibility in response to clicks on links / close buttons..