Question

There is a tutorial here: http://perishablepress.com/slide-fade-content/

and the code it provides is:

$(document).ready(function(){
    // Ajax Slide & Fade Content with jQuery @ http://perishablepress.com/slide-fade-content/
    $('.more').live('click',function(){
        var href = $(this).attr('href');
        if ($('#ajax').is(':visible')) {
            $('#ajax').css('display','block').animate({height:'1px'}).empty();
        }
        $('#ajax').css('display','block').animate({height:'200px'},function(){
            $('#ajax').html('<img class="loader" src="http://example.com/slide-fade-content/loader.gif" alt="">');
            $('#ajax').load('http://example.com/slide-fade-content/slide-fade-content.html.html #'+href,function(){
                $('#ajax').hide().fadeIn().highlightFade({color:'rgb(253,253,175)'});
            });
        });
        return true;
    });
});

This will load content from an external file, is there a way to do something similar but to load the content from a hidden div on the same page?

Answer 1

replace

$('#ajax').load('http://example.com/slide-fade-content/slide-fade-content.html.html #'+href,function(){

with

var contentTobeLoaded=$("#myHiddenDivId").html()
$('#ajax').html(contentTobeLoaded).fadeIn(600,function(){

Assuming you have the hidden div with the id myHiddenDivId

EDIT : As from your comment and sample link provided, Here is my updated solution

1) Have the content for each item in a seperate div and hide it. this div should have unique id
2) when you click on the links you get the id and load content from the hidden div corresponding to that.

HTML

  <div id="divHiddenContainer" style="display:none;">
      <div id="divItem1"><span style="background-color:Gray;">God, My description about item 1 goes here</span></div>
      <div id="divItem2"><span style="background-color:yellow;">Brother,My description about item 222 goes here</span></div>
      <div id="divItem3"><span style="background-color:orange;">Hello,My description about item 333 goes here</span></div>
  </div>

   <a href="#" class="aItemLnk" id="a1">Item 1</a>
   <a href="#" class="aItemLnk" id="a2">Item 1</a>
   <a href="#" class="aItemLnk" id="a3">Item 1</a>

   <h3>Content goes here</h3>
    <div id="ajax"></div>

Javascript

$(".aItemLnk").click(function () {

    var id = $(this).attr("id").replace(/^.(\s+)?/, "");
    var contentTobeLoaded = $("#divItem" + id).html();          

    $('#ajax').html(contentTobeLoaded).fadeIn(600, function () {
      //do whatever you want after fadeIn
    });
});

Here is the working sample : http://jsfiddle.net/9xZrq/

Second sample which has the fadeOut before fadeIn : http://jsfiddle.net/9xZrq/1/

You can change the delay you need for fadeIn from 600 to 1200 or 1500 or whatever you want

Note that you need to have some connection between the link id and hidden div id so that you can figure out which div to be showed.