jQuery change original-title text on click?

Question

I have this html line:

<div class="hide-btn top tip-s" original-title="Close sidebar"></div>

And when a user clicks on it i want that the text change to 'Open Sidebar' how can i do this?

This is my JS:

$(".hide-btn").click(function(){
    if($("#left").css("width") == "0px"){
        $("#left").animate({width:"230px"}, 500);
        $("#right").animate({marginLeft:"250px"}, 500);
        $("#wrapper, #container").animate({backgroundPosition:"0 0"}, 500);
        $(".hide-btn.top, .hide-btn.center, .hide-btn.bottom").animate({left: "223px"}, 500, function() { $(window).trigger("resize");});
    }
    else{
        $("#left").animate({width:"0px"}, 500);
        $("#right").animate({marginLeft:"20px"}, 500);
        $("#wrapper, #container").animate({backgroundPosition:"-230px 0px"}, 500);
        $(".hide-btn.top, .hide-btn.center, .hide-btn.bottom").animate({left: "-7px"}, 500, function() { $(window).trigger("resize");});
    }
});

Thank you for your time!

possible duplicate of [How to change an element's title attribute using jQuery](http://stackoverflow.com/questions/987967/how-to-change-an-elements-title-attribute-using-jquery) ... this will help you. — Felix Kling, Apr 07 '12 at 09:54

T.J. Crowder · Accepted Answer · 2012-04-07T10:01:26.460

7

To change an attribute on an element using jQuery, you use attr. Within an event handler hooked up with jQuery, the original DOM element is available as this. To get a jQuery wrapper around it, use $(this). E.g.:

$(this).attr("original-title", "new text");

Side note: The attribute original-title is invalid for div elements. Consider using data-* attributes instead.

edited Apr 07 '12 at 10:01

answered Apr 07 '12 at 09:53

T.J. Crowder

1,031,962
187
1,923
1,875

score 2 · Answer 2 · answered Apr 07 '12 at 09:55

I like to do this one for that kind of thing :-)

var a = $(".hide-btn.top");
a.attr('original-title', a.attr('original-title').replace(/Close/, 'Open') );

May seem overcomplicated but I often change my mind about the exact labels afterwards and this saves me having to go back and adjust everything.

jQuery change original-title text on click?

2 Answers2