CODEWITHSUNDEEP
javascriptjquery
Michal
Michal

Reputation: 3368

jQUery .slideToggle() & .text replace

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:

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.

Upvotes: 0

Views: 1797

Answers (4)

OnResolve
OnResolve

Reputation: 4032

The sliding animation is hiding the toggle. I've edited the script to remove the animation and it shows the toggle working as intended. How you had it, the initial state is there but is hidden by the slide up.

$(document).ready(function(){
    $("#popis").text($("#popis_short").text());
    var toggle_sw = true;

    $("#popis_switch").click(function(){
        var full = $("#popis_full").text();
        var short = $("#popis_short").text();

        if ( toggle_sw == true )          
            $("#popis").text(full).slideDown('slow');      
        else          
            $("#popis").text(short).slideUp('slow').slideDown('slow');

        toggle_sw = !toggle_sw;
    });
});

EDIT:

Changing the order in the jquery chain, I was able to get a smooth animation:

$(document).ready(function(){
    $("#popis").text($("#popis_short").text());
    var toggle_sw = true;

    $("#popis_switch").click(function(){
        var full = $("#popis_full").text();
        var short = $("#popis_short").text();

        if ( toggle_sw == true )          
            $("#popis").slideUp('slow').text(full).slideDown('slow');      
        else          
            $("#popis").slideUp('slow').text(short).slideDown('slow');

        toggle_sw = !toggle_sw;
    });
});

Or : http://jsfiddle.net/qmP8R/24/

Upvotes: 0

Kory Hodgson
Kory Hodgson

Reputation: 790

This best way to do it in my opinion is to hide only the part of the text that should only be shown when you want the full text. This will save on the size of data required as well.

See my example here: http://jsfiddle.net/qmP8R/19/

The javascript is much simpler, and there is less html too:

$(document).ready(function(){

    $("#popis_switch").on( 'click', function(){

        if ( $("#popis_full").is(':visible') )
        {
            $("#popis_full").slideUp('slow');
        }
        else
        {
            $("#popis_full").slideDown('slow');
        }
    });
});

Upvotes: 1

Henesnarfel
Henesnarfel

Reputation: 2139

Check out JSFiddle. I've basically removed all the logic you had with changing the text.

There is a short div and a long div. The short div contains the first part and the long div contains the REST. Then all you need to do is slide up and down on the long div without changing any of the text.

Upvotes: 1

Jasper
Jasper

Reputation: 76003

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.

Upvotes: 1

Related Questions