FAQ Section for Custom HTML Block in ONTRApages

faq-block.html

<!-- Code for Custom HTML block in ONTRApages to create a FAQ section. It
     uses the HTML5 details tag. To see this in action visit 
     http://acumen.pages.ontraport.net/details
-->
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');

details {
    font-family: 'Roboto', sans-serif; 
    font-size: 13px; 
    background: #FFF;
    color: #212121;
  }

details summary {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: bold;
    vertical-align: top;
    background: #FFF;
    color: #000;
    border-bottom: 1px solid #ddd;
    padding: 5px 10px;
    outline: none;
}

details[open] summary {
    font-family: 'Roboto', sans-serif;
    background: #616161;
    color: #FFF;
    padding-bottom: 5px;
}
 details[open] p {
    padding-top: 3px;
  }  
  
  details[open] li {
    margin-left: 20px;
  }
  
</style>

<div style="max-width: 800px; margin: 0 auto;">
<h3>FAQs</h3>
<details>
<summary>How can I create a FAQ page?</summary>
  <p>Follow these steps:</p>
  <ol>
    <li>Add a Custom HTML block to your template</li>
    <li>Select to Edit the Custom HTML block, select all of the code and delete it</li>
    <li>Copy the code from 
         <a href="https://gist.github.com/ONTRAPORT-Frank/d1cf8cd9fa2ee13cdfd51cb94a78d825" target="_blank">This Link</a></li>
    <li>Paste that code into the Custom HTML block</li>
    <li>Edit the "questions" between the &lt;summary&gt; tags</li>
    <li>Edit the answers below each question to suit<br><br>
      <img src="http://acumen.ontraport.com/d/details-faq-block.png" alt="details FAQ block">
      <br>
    </li>
    <li>Save the code in the palette on the left</li>
    <li>Save and Publish the page</li>
    <li>View the FAQ on the published page</li>
  </ol>
</details>
<details>
<summary>What is the code to do this?</summary>
  <p>You can copy and paste the code at: 
       <a href="https://gist.github.com/ONTRAPORT-Frank/d1cf8cd9fa2ee13cdfd51cb94a78d825" target="_blank">This Link</a>.</p>
</details>
<details>
  <summary>Can I adjust the width of the FAQ section?</summary>
  <p>Yes, if you look at the html code, there is a div element with an inline 
    style declaration stating that the max-width is equal to 800px. The 
    "margin: 0 auto;" style centers the 800px block on the page. You can 
    adjust these values to make the FAQ block a different size.</p>
</details>
<details>
  <summary>Can I change the dark grey summary text background when a details section is open?</summary>
  <p>Yes, just edit the style declaration for "details[open] summary" and replace the "#616161;" hex
    color code in the "background: #616161;" element. If you use a light color for the background
    you might also want to change the "color: #FFF;" element to "color: #000;" (black) or a similar 
    dark color so the text can be seen.</p>
  </details>
<details>
  <summary>Can I make a section open by default?</summary>
  <p>Yes,just add the word "open" to the details tag. It would look like
    &lt;details open&gt; in the code. That details section will then render
    opened, but still can be clicked closed.</p>
  </details>
  <details>
    <summary>This is great! Can ONTRAPORT teach me how to code HTML and CSS?</summary>
    <p>Nope. This is a personal project that Frank is sharing, and not an officially 
    supported bit of code. You can show it to any HTML / CSS coder and they will recognize 
    it as standards-based, regular old HTML5 and easy-peasy CSS. Go forth and hire an
      expert!</p>
    </details>
 </div>

Add a Custom HTML block to your template
Select to Edit the Custom HTML block, select all of the code and delete it
Copy the code from https://gist.github.com/ONTRAPORT-Frank/d1cf8cd9fa2ee13cdfd51cb94a78d825
Paste that code into the Custom HTML block
Edit the "questions" between the <summary> tags
Edit the answers below each question to suit (see http://screenshot.ontrapedia.com/public/fhagan/1479827693.png)
Save the code in the palette on the left
Save and Publish the page
View the FAQ on the published page

Browser support: renders in Chrome 12, Firefox 49, Safari 6, and Opera 15 and later versions all support the details tag. Display of the open / closed indicator triangle may differ; in Firefox, it is sometimes absent.

Microsoft Internet Explorer and Microsoft Edge do not render the tag correctly. Edge shows all the sections open without the ability to collapse them (but at least the content shows). Friends don't let friends use Microsoft browsers, so we should be good.