A page to have its own footer separate from the other pages

I want a button like this:

<div id="post1">
<span class="collapsed">
 <a href="javascript:void(0)" style= "font-size:20px; color:#2B65EC"> Why are annotations so important?</a>
</span>

<span class="expanded">
<a href="javascript:void(0)" style= "font-size:20px; color:#2B65EC">Less</a>
 <p style= "font-size:20px;color:#347C2C;">They benefit you by allowing other users to paraphrase words, allowing more opinions to be shown to help you understand the big idea, as well as marking your own reading/writings to know where you left off. </p>
 
</span>
</div>

Select allOpen in new window

It works fine, but I want that when I click on "Want to learn more" , I get a whole new section on the page something like a footer black with its own background. Any idea on how I could have this done?
Here is my JS code:

<script>
$( function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },

    });
 
    $( "#opener" ).on( "click", function() {
      $( "#dialog" ).dialog( "open" );
    });
  } );
</script>

Select allOpen in new window