Adding a diagonal show / hide with jquery

Question

I am trying to create a show / hide effect using toggle and animate.

I have created the following fiddle:

which uses this code:

<script>

$(document).ready(function(){

$('.moreinfo').hide();

$('.more').click(function (ev) {
var t = ev.target

$('#info' + $(this).attr('target')).slideToggle(500, function(){
console.log(ev.target)

$('#info2').animate({width: 570, height: 570, marginLeft: 0}, {duration: 2000},
    "linear");
});

$(t).html($(this).is(':visible')? 'Hide Info (x)' : 'Show Info (+)')

});

return false;

});

</script>

Problems are as follows:

I would like the text reveal and the animation to occur at the same time. Currently the text shows and then the animation begins.
Once the animation has taken place, when I click on 'Hide Info (x)', I would expect the text to change back to 'Show Info (+)'. It does not do this. It continually shows 'Hide Info (x)'.
How can the animation be reversed so that the blue box shrinks again?

Thanks for all your time and help on this in advance.

I've used Stack Overflow a fair bit and actually people prefer this approach when it comes to questions. — Johnny, Apr 29 '14 at 16:52
for your first question check here: http://stackoverflow.com/questions/1251300/how-to-run-two-jquery-animations-simultaneously — vaskort, Apr 29 '14 at 16:58

Tricky12 · Answer 1 · 2014-04-29T17:31:00.543

I have fixed your 2nd and 3rd problems.

2) You change the text based on whether or not 'Hide Info (x)' is visible. Once visible, it never gets hidden and therefore will never toggle.

3) You animate the size of the blue box to increase, but never animate to set it back to its original size.

Demo here

Update: For your 1st issue, you can try adding a fadeOut(), change html, fadeIn() to slow it down to the speed of your animation.

Updated Demo

$('.more').click(function (ev) {
    var t = ev.target;

    $('#info' + $(this).attr('target')).slideToggle(500, function() {

        //$(t).html($(this).is(':visible')? 'Hide Info (x)' : 'Show Info (+)')
        if($(t).html() == 'Show Info (+)') {
            console.log(ev.target);
            $('#info2').animate({width: 570, height: 570, marginLeft: 0}, {duration: 2000}, "linear");
            $(t).fadeOut(function() {
                $(this).html('Hide Info (x)').fadeIn(2000);
            });
        } else {
            $('#info2').animate({width: 300, height: 20, marginLeft: 0}, {duration: 2000}, "linear");
            $(t).fadeOut(function() {
                $(this).html('Show Info (+)').fadeIn(2000);
            });
        }

    });

});

Adding a diagonal show / hide with jquery

1 Answers1