Question

I’ve got the following problem (test version available http://jsfiddle.net/qmP8R/2/):

I have two <div> containing two versions of text and a third <div> used as a “container”.

On load the container is populated with the shorten text. On the click of a button I want to change the short version for the long version with some animation (sliding up/down animation) and vice versa (swap short for long and long for short – basically toggle).

In the test version it works quite as expected, but I am not able to solve the following problems:

• animation on 1st click does not work (but the text is changed to the long version)
• on second click the whole container is slided up – not reverting to initial state

Basically what I waht to achieve is a kind of toggle behaviour, but connected with .text replacement rather than display: show/hide.

P.S.: AJAX content replacement is not available as a solution in my case.

Answer 1

How about sliding the text up, then changing it, and sliding it back down:

$(document).ready(function(){
    $("#popis").text($("#popis_short").text());
    var toggle_sw = true;
    $("#popis_switch").click(function(){
        var full  = $("#popis_full").text(),
            short = $("#popis_short").text();
          if ( toggle_sw == true )
          {
              $("#popis").slideUp('slow', function () {
                  $(this).text(full).slideDown('slow');
              });
              toggle_sw = false;
          }
          else
          {
              $("#popis").slideUp('slow', function () {
                  $(this).text(short).slideDown('slow');
              });
              toggle_sw = true;
          }
    });
});

Here is a demo: http://jsfiddle.net/qmP8R/11/

Update

Since the text does not change, you can optimize your code a bit by selecting the text of the elements when the document is ready rather than doing so every-time the click event handler is called:

$(function(){
    var $popis    = $('#popis'),
        toggle_sw = true,
        full      = $("#popis_full").text(),
        short     = $("#popis_short").text();
    
    $popis.text(short);
    
    $("#popis_switch").click(function(){
          if ( toggle_sw ) {
              $popis.slideUp('slow', function () {
                  $(this).text(full).slideDown('slow');
              });
              toggle_sw = false;
          } else {
              $popis.slideUp('slow', function () {
                  $(this).text(short).slideDown('slow');
              });
              toggle_sw = true;
          }
    });
});

Here is a demo of the optimized version: http://jsfiddle.net/qmP8R/13/

This example caches everything it can so no calculations have to happen that don’t need to in the click event handler.