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!

Answer 1

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.