Load Content From a Hidden Div?

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.

Answer 2

I suppose that your div already contains his data and you just want to show it, so you can use:

$('#id_of_your_div').show().fadeIn();

Or I've mistaken you and you want to load the content from a div to an another one? So you can retrieve his content with html() .

Answer 3

If I understand right... just call your object html attribute to do that...

$('#yourdiv').html();

This will return the content of the div no matter it is hidden or no.

Answer 4

应该可以做这样的事情（如果我正确地收集你） - http://jsfiddle.net/HTrep/6/

Answer 5

You should be able to load content from a hidden div fairly simply, since you're using jquery to have the $() method.

Give the div an id, then using $('#id-of-element').innerHTML will give you the contents of the hidden div.