Expandable DIV on-click - on demand

Question

Hello, I've been searching lots and found many tutorials for Javascript / jquery on click expandable divs..

e.g. http://www.dustindiaz.com/basement/block-toggle.html

However what I am looking for,is slightly different .. I need to load the div content on click... rather than hidden loading the div in the background... with display:none for example.

Here is a working example of content loaded on demand http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm

Now obviously this is quite complex for such a little task.. I simply need a simple text link that expands the div below.

I hope that made sense... any ideas guys?

Answer 1

<script type="text/javascript">
    $(document).ready(function () {
        $("#create-content").click (function () {
            //TODO: Show some kind of "loading" indicator
            $.get("content.html", function (data) {
                //TODO: Hide the "loading" indicator
                $("#target-content").html (data);
            });
        });
    });
</script>

<a href="#" id="create-content">Click</a>
<div id="target-content></div>

This snipped will load content.html using AJAX and the respose will be used as the html content of the target div, content.html could be any resource or script on your server, BUT YOU SHOULD BE VERY CAREFULL TO AVOID XSS AND ANY OTHER SECURITY RISK.

Besides, it would be nice if you add some kind of animation to indicate that the content is loagind, otherwise the user could think that nothing is happening.

Another thing that is missing is showing some kind of error message if the request to the server fails for some reason, the documentation about $.get method can be found here: http://api.jquery.com/jQuery.get/

Answer 2

Here is a working example of doing what I think you want:

http://jsfiddle.net/yVbYQ/47/

$('.click').click(function(){
  $.ajax({
      type: 'POST',
    url: '/echo/html/',
      data: { html: "<p class='loaded'>hello ajax!<br/>hello ajax!<br/>hello ajax!<br/>hello ajax!</p>"},
    success: function(data) {
      $('#post').html(data);
        $('.loaded').slideDown();
    }
  });
});

and the CSS

.loaded
{
    background-color: red;
    display: none;
}

​

This makes the content get loaded with display: none, and then it slides down the new content making it look all stylish.

Answer 3

I've done this often by creating divs underneath in a RowDataBound event for Gridviews. If you're looking to not create those underneath... I suggest simply creating a function that accepts the current element, grab the parent elements until you've grabbed the parent that has the rows within it, then call your ajax:

Keep in mind, this is pseudo-code:

<script type="text/javascript">
    $(document).ready(function () {
        $("#clickable-div").click (function () {

            $.ajax({
                url: "test.html?action=getLink", 
                success: function(data){
                  $(this).parentElement.append(data);
            }});

            $(this).show("slide", { direction: "down" }, 1000);
        });
    });
</script>

Something along those lines, although that isn't working code. The data returned could be in the form of HTML... or you could JSON it and parse it within the success function and append.

Answer 4

If you're looking for the ultimate in simplicity (with jQuery), you can use the shortcut:

$('#your_target_div').load('your_url');