jquery animation doesn't work properly on first run

Question

this is the code: code on jsfiddle. On the first run it doesn't show the "slideDown" animation but subsequent times it works fine.

$("#more-news") .click(function() {
   $(".news-hide") .slideDown('slow').removeClass("hide");
});

Answer 1

Use the following.

$("#more-news").click(function() {
    //changed the line below.
    $(".news-hide").hide().removeClass('hide').slideDown('slow');
    $("#less-news").fadeIn('slow').removeClass("hide");
    $("#more-news").fadeOut().addClass("hide");
});

DEMO

Answer 2

Instead of using multiple elements and multiple events, you can use like this,

$("#more-news").click(function() {
  var button = $(this)
  $(".news-hide").slideToggle(function() {
    $(".news-hide").is(":visible") ? button.text("Less News") : button.text("More News")
  });
});

Fiddle