Jquery :: .load() - Append contents and Animate

Created For: http://stackoverflow.com/q/11022888/352449

by Salustiano Silva

HTML

<div id="wrap">
    <div id="feed-page">
        <div id="block01">
            <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique ligula et lectus pulvinar sit amet aliquam turpis vulputate. Cras pretium adipiscing vestibulum. Fusce est tellus, blandit in consequat in, tempor vel quam. Morbi eros est, congue quis consequat vitae, commodo et nisi. Cras vitae tortor metus. Phasellus sit amet est nec arcu accumsan sollicitudin. Aenean nec risus in ligula semper laoreet. Donec pretium, magna eu porttitor mattis, velit felis dictum libero, nec ultricies odio erat ac urna. Praesent bibendum interdum erat ac consequat. Aliquam erat volutpat. Nunc eget tortor ipsum.
            </p>
            <p>
Etiam porta mauris eget neque sagittis eu consectetur arcu tristique. Vivamus gravida lacus nec nisi condimentum tempor. Mauris dignissim scelerisque erat in condimentum. Nam eu sem sem, id iaculis lorem. In aliquet dictum porttitor. Nullam aliquet risus fringilla erat consectetur pellentesque. Phasellus bibendum fringilla neque ultrices condimentum. Duis vitae neque eget magna tempus scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis tincidunt, purus in adipiscing rhoncus, lorem quam consequat urna, ut placerat dui justo non leo. In lobortis metus vitae nibh consectetur malesuada. Vivamus suscipit consequat metus, in condimentum urna tristique a. Donec ante mauris, gravida rutrum tincidunt quis, tincidunt eu nisi.
            </p>
            <p>
Nunc eu felis id lectus blandit consectetur. Pellentesque dignissim mattis metus sit amet adipiscing. Fusce tellus velit, interdum in convallis eu, vehicula quis tellus. Sed venenatis, nisl eu hendrerit blandit, mauris urna blandit dolor, vitae adipiscing elit ante quis ante. Pellentesque vel neque massa, id condimentum eros. Pellentesque vulputate, nunc vitae mollis fermentum, elit tortor tempus lectus, at ornare lorem nisl vel diam. Sed bibendum...

CSS

#block01 {
    color: gray;
    font-size: 0.8em;
    text-align: justify;
}
#block02 {
    padding: 20px;
    border: 40px solid #212121;
    background-color: #444;
}
.feed-load {
    cursor: pointer;
    margin: 4px;
    padding: 4px;
    border: 1px solid #D9D9D9;
    background-color: #F2F2F2;
    text-align: center;
    font-family: sans-serif;
}

JavaScript

// on click
$('.feed-load').click(function(){   

  // load the new data to an element
  $("<div>").load("/ #header", function() {

    // all done, append the data to the '#feed-page'
    var $html   = $(this).find("#name").html(),
        $newEle = $('<div id="block02" />').attr("style", 'display:none;').html($html);

    $("#feed-page").append($newEle);
      $('#block02').slideToggle();

    // call your function
    //hideLoading();
  });

  // continue the remaining of your code...
  $(".feed-load .button-content").css( "display" , "none" );
  $('.feed-load-img').css( "display" , "block" );
});