jQuery Toggling Text
I am trying to toggle text when I click to expand/collapse a div. I have written the half of the code that toggles the div and changes to text one-way, but I am trying to figure out how to have it effectively "reset" so a user and toggle back and forth (between "Less Info -" and "More Info +").
Here's the code so far:
$("a.more_info").click(function(){
$(this).toggleClass("clicked").next().slideToggle(1开发者_如何学Python000);
$(this).replaceWith("<a class='more_info' href='#'>Less Info -</a>");
return false; //Prevent the browser jump to the link anchor
});
Thanks
EDIT: The pertinent markup looks like this:
<a class="more_info" href="#">More Info +</a>
<div class="project_toggle">
<h6>Hello</h6>
</div>
You could instead change the text of the current link instead of replacing the element...
$("a.more_info").click(function(){
var $this = $(this);
$this.toggleClass("clicked").next().slideToggle(1000);
$this.text($this.is(".clicked") ? "Less Info -" : "More Info +");
return false; //Prevent the browser jump to the link anchor
});
Of course you might have to reverse the logic inside the text()
method depending on what clicked means.
精彩评论