CODEWITHSUNDEEP
jqueryhtmlbutton
mrgreen
mrgreen

Reputation: 35

Close button on div

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);
    });
});

Upvotes: 0

Views: 9544

Answers (3)

SpYk3HH
SpYk3HH

Reputation: 22570

Try something like this:

$(function(){
    $(".action").on("click", function(e) {
        var $targ = $(this).data("content");

        $(".action").not($(this)).each(function(i) { $($(this).data("content")).stop().hide(400); });

        //  you should really consider adding a class and changing the jQuery styleing to be a style on a style sheet or in head
        if ($targ.children(".cls") == 0) {  //  cls element does not exist
            $targ.prepend(
                $("<div />").prop({ id: "cls", title: "Close" })
                    .addClass("cls")    //  this is par my suggestion to add a class name variable
                    .css({ left: '843px', top: '15px', width: '12px', height: '18px', cursor: 'pointer', padding: '3px', position: 'absolute', border: 'solid gray 0px', background-color: 'white' }) // not needed if you take my suggestion
                    .text("x")
            );
            $targ.children(".cls").click(function(e) {
                $(this).parent().stop().hide(400, function(e) {
                    //  $(this).children(".cls").remove();
                    //  why remove this?
                });
            });
        };

        $targ.show({ height: "toggle" }, 400);
    });
})

Upvotes: 0

zb&#39;
zb&#39;

Reputation: 8049

As i understand, you want to remove target. That should work, just use next() instead of parent() div and insert before the element :

$(function(){

$("div.action").click (function(){
var $this = $(this);
var target = $this.data('content');
$('div.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.next().hide(400, function(){
            t.remove();
        });
    }
});
$(target).before(cls).show({height: "toggle"},400);
});
});

simplifed sample: http://jsfiddle.net/oceog/tASL5/

Upvotes: 0

redShadow
redShadow

Reputation: 6777

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..

Upvotes: 2

Related Questions