Use a modification observer to show one set of content on the first (address) page of a targeted action, and another set of content on the second (letter/legislators) page.

action_swap_header_content.html

<!-- BEGIN Hide/show parts of the action header based on the workflow step being viewed. -->
<script type="text/javascript">
    // NOTE: The basis for this script is described in exquisite detail on this page:
    // https://gist.github.com/salsalabs/fa7cdd9d27f955bdc10e9cbac522cec5
    // The body of the script is copied as-is.  The only real changes are modify()
    // and the parameters to waitForElement.
  (() => {
    // Function to change an element on a targeted action page.
    //
    // If the current page is not a targeted action, then the desired element already appears on
    // the page and can be modified immediately.  If the current page *is* a targeted action, then
    // we'll wait for the element to appear before modifying it.
    // @param [String]    target    selector for the root element (for example, "#mainTarget")
    // @param [String]    selector  selector for element that we're waiting for (for example, "input[name=Cell_Phone]'
    // @param [Function]  modify    call this method when the element is found
    // @see  https://gist.github.com/salsalabs/fa7cdd9d27f955bdc10e9cbac522cec5
    window.waitForElement = (target, selector, modify) => {
      // If this is not a targeted action, then the element that we're looking for is
      // already on the page -- no need to wait for it.
      var e = document.querySelector(target);
      if (e !== null) {
        e = e.querySelector(selector);
        if (e !== null) {
          modify(e);
          return;
        }
      }
      var done = false;
      // Wait for the element identified by "selector"
      var callback = (mutations) => {
        if (done) {
          // Skip execution if we're already finished...
          return;
        }
        mutations.forEach(function(mutation) {
          if (mutation.type == "childList") {
            // @see https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord
            var list = document.querySelector(target).querySelectorAll(selector);
            if (list.length != 0) {
              Array.from(list).forEach(modify);
              done = true;
            }
          }
        });
      };
      var observer = new MutationObserver(callback);
      var config = {
          childList: true,
          subtree: true
      };
      observer.observe(document.querySelector(target), config);
    }

    // Modify the contents of the page.  Called when the legislative targets
    // appear.  Requires an element with ID "action-body" to contain the 
    // part of the header that's visible after the address.  Requires an 
    // element with ID "alternate" that's visible when the legislative
    // targets appear.  Note that "action-body" and "alternate" are typically
    // not visible at the same time.
    var modify = () => {
        var e = document.querySelector("#alternate");
        if (e != null) {
            e.style.display = "block";
            e = document.querySelector("#action-body");
            if (e != null) {
                e.style.display = "none";
            }
        }
    }
    // This script only runs on Advocacy 4 actions.
    if (window.location.href.indexOf('action4/common/public') != -1) {
        // Wait for the legislative targets to appear.  When they do, then call modify.
        waitForElement("div.salsa", "div.targets", modify);
    }
  })();
</script>
<!-- END Hide/show parts of the action header based on the workflow step being viewed. -->

action_swap_sample_content.html

<!-- The contents of this <div> tag appear only on the first (address) page of a targeted action. -->
<div id="for-address-page">
    <hr/>
    <p style="text-align: center;">
        <span style="font-size: x-large;">Show this content on the first (address) page.</span>
    </p>
    <hr/>
</div>

<!-- The contents of this <div> tag appear only on the second (letter/legislators) page of a targeted action. -->
<div id="for-letter-page">
    <hr />
    <p style="text-align: center;">
    <span style="font-size: x-large;">Show this content on the second (letter and legislators) page.</span>
    </p>
    <hr/>
</div>