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?

Check out the 'Ajax' section of that JQuery lib you are using ;) — Marvin Smit, Dec 14 '11 at 18:11

Shyju · Accepted Answer · 2011-12-14T21:24:59.047

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.

This works, but it pulls all of the hidden divs at once. What I'm trying to do is hide multiple project details in a #hiddendiv. and then ajax will pull #example1, #example2 or #example3 depending on which one is clicked. Is there a better way to do this? An example of what I'm trying to do is here: http://iamyuna.com/ if you click a shape, it only pulls the details for that specific project instead of all — Joe Bobby, Dec 14 '11 at 19:45
it works but the fade in doesnt seem to be working for the jsfiddle even if i pasted the example above how do I get that to work? after that everythin should be fine :) — Joe Bobby, Dec 14 '11 at 21:19
change the fade delay time and do fadeout before fadeIn. I updated answer. check this sample :http://jsfiddle.net/9xZrq/1/ — Shyju, Dec 14 '11 at 21:23
thanks! this seems to work out great! I do have a quick question, I've noticed some people use .fadeIn() and .FadeOut() and then I noticed some using .animate({opacity: '0'}) and .animate({opacity: '1'}) .. is there a difference or a reason to pick one over the other? — Joe Bobby, Dec 14 '11 at 21:54

score 0 · Answer 2 · answered Dec 14 '11 at 18:11

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().

score 0 · Answer 3 · answered Dec 14 '11 at 18:12

0

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.

answered Dec 14 '11 at 18:12

score 0 · Answer 4 · answered Dec 14 '11 at 18:16

0

Should be able to just do something like this (if I gather you rightly) - http://jsfiddle.net/HTrep/6/

answered Dec 14 '11 at 18:16

christian.thomas

1,122
1
8
19

score -1 · Answer 5 · answered Dec 14 '11 at 18:12

-1

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.

answered Dec 14 '11 at 18:12

Sean

564
1
3
12

innerHTML is no longer preferred http://www.javascriptkata.com/2007/04/17/do-not-use-the-innerhtml-property-on-html-objects/ – Casey Yee Dec 14 '11 at 18:17
$('#id-of-element').html() will give you the inner html – Shyju Dec 14 '11 at 18:17

Load Content From a Hidden Div?

5 Answers5

Linked