Question

I’ve started out with a div box that contains a header within it.

My hope is to have a toggle() event that when the header is clicked, it stores the header string into a variable, changes the HTML of that header, and animates the parent() div box that contains it.

The second function is to animate the parent() div box again, and change the HTML back to its original text (which would be stored as a variable.)

I’m having trouble though, and I’m not sure where my problem lies. I’m using html() to ‘get’ the string of the original header, and I’m not sure that’s correct. I’m also not sure if I need more precaution to pass the variable or call the variable correctly, either.

http://jsfiddle.net/94nPv/1/

Please let me know what I am doing wrong. Many thanks SO.

Answer 1

You can use the .data() method to store the original html http://jsfiddle.net/94nPv/3/

jQuery(document).ready(function($) {
    $('h5').toggle(function() {
        var $this = $(this);
        $this.data('originalText',$this.html());
        $this.parent('div.softwarebox').animate({ height: "700px" });
        $this.html("Close");
    }, function() {
        var $this = $(this);
        $this.parent('div.softwarebox').animate({ height: "19px" });
        $this.html($this.data('originalText'));
    });        
});​

slightly optimized (no extra calls to .html or .data): http://jsfiddle.net/94nPv/7/

jQuery(document).ready(function($) {
    $('h5').each(function(){
        var $this = $(this);
        $this.data('originalText',$this.html());
    });
    $('h5').click(function() {
        var $this = $(this);
        if ($this.text() === "Close") {
            $this.html($this.data('originalText'));
            $this.parent('div.softwarebox').animate({
                height: "19px"
            });
        }
        else {
            $this.text("Close");
            $this.parent('div.softwarebox').animate({
                height: "700px"
            });
        }
    });
});​