Question

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(1000);
$(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> 

Answer 1

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.