Question

I have the following django code that loops over all of my objects and creates a hidden div that i wish to show in a popup container.

My popup container works well, I just don’t know how to do three things:

1. I want to hide whatever content is in the container
2. then I want to load the content into the container
3. then I want to set the display of the content to block once it is
   loaded in the popup

django code

    {% for recipe in recipe_list %}
            <div class="recipe">
                <div class="button">
                      click me to load recipe content
                    </div>

            <div id="recipepopup" style="display:none;">
                       //content
            </div>
    {% endfor %}

    <div id = "popupdiv">
    <div id = "content_to_hide">
     //content to hide on recipepopup load
    </div>
    </div>

And the Javascript for the click:

<script type="text/javascript">
  $(document).ready(function(){
    $(".button").click(function(){
      // hide current content in popupdiv 
      // then load recipepopup then set display
      // of recipepopup to block  
    });
  });
</script>

Answer 1

A one-liner will work !

$("#popupdiv").children(':first').hide().end().append($('#recipepopup')).find('#recipepopup').css('display', 'block');