congo/exampleSite/layouts/partials/home/custom.html

<script type="text/javascript">
  function switchLayout() {
    var pageDiv = document.getElementById("page");
    var profileDiv = document.getElementById("profile");
    var layoutSpan = document.getElementById("layout");
    if (pageDiv.style.display === "none") {
      pageDiv.style.display = "block";
      profileDiv.style.display = "none";
      layoutSpan.innerHTML = "page";
    } else {
      pageDiv.style.display = "none";
      profileDiv.style.display = "block";
      layoutSpan.innerHTML = "profile";
    }
  }
</script>

<div class="flex px-4 py-3 mb-8 text-base rounded-md bg-primary-100 dark:bg-primary-900">
  <span class="flex items-center pr-3 text-primary-400">
    {{ partial "icon.html" "exclamation-triangle" }}
  </span>
  <span class="flex items-center justify-between flex-grow no-prose dark:text-gray-300">
    <span>This is a demo of the `<code id="layout" class="">page</code>` layout.</span>
    <button
      class="font-bold px-4 py-2 !text-white !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
      onclick="switchLayout()"
    >
      Switch layout &orarr;
    </button>
  </span>
</div>

<div id="page">
  {{ partial "partials/home/page.html" . }}
</div>
<div id="profile" style="display: none">
  {{ partial "partials/home/profile.html" . }}
</div>