MHJ FAQ Page

by MarkKramer

HTML

<style>

</style>
<div class="faqpage">
  <p>Below are a list of frequently asked questions we&nbsp;commonly get asked. If you have a question that isn't answered below, please send it to us via <a href="mailto:[email protected]" title="Email Matt-Hat Jerky" class="text-link">email&nbsp;📧</a> and we'll be sure to get you an answer!</p>
  <div class="accordion accordion-close" id="section1">
    <strong>WHAT IS THE SHELF LIFE OF YOUR JERKY?</strong><span></span>
  </div>
  <div class="container" style="display: none;">
    <div class="content">
      <p>
		<strong>6 WEEKS</strong> from the day that it was made!
		<br><br>
		Keep in mind that that is the Best By date and NOT an expiration date. (this means that it's the date the jerky is best consumed by, not necessarily when the jerky expires)
		<br><br>
		My jerky is made 100% without preservatives, so it has a very short shelf life compared to other commercially available jerky brands.
	  </p>
    </div>
  </div>
  <div class="accordion accordion-close" id="section2">
    <strong>DOES YOUR JERKY CONTAIN MSG?</strong><span></span>
  </div>
  <div class="container" style="display: none;">
    <div class="content">
      <p><strong>No!</strong> I take pride in the fact that my jerky contains no artificial preservatives or additives.</p>
    </div>
  </div>
  <div class="accordion accordion-close" id="section3">
    <strong>DOES YOUR JERKY CONTAIN NITRATES?</strong><span></span>
  </div>
  <div class="container" style="display: none;">
    <div class="content">
      <p><strong>No!</strong> I take pride in the fact that my jerky contains no artificial preservatives or additives.</p>
    </div>
  </div>
  <div class="accordion accordion-close" id="section4">
    <strong>DO I NEED TO REFRIGERATE AFTER OPENING?</strong><span></span>
  </div>
  <div class="container" style="display: none;">
    <div class="content">
      <p><strong>Yes!</strong> Consume or refrigerate within 3 days of opening.</p>
    </div>
 ...

CSS

.accordion {
  margin: 0;
  padding: 10px;
  border-top: #f0f0f0 1px solid;
  background: #E42822;
  text-decoration: none;
  color: #fff;
  font-size: 1em;
  position: relative;
  border-radius: 10px;
  font-family: Arial, Helvetica, sans-serif;
}

.accordion-open {
  background: #E42822;
  color: #fff;
  border-radius: 10px 10px 0 0;
}

.accordion-open span {
  display: block;
  position: absolute;
  right: 3px;
  top: 25%;
  padding: 10px 15px;
  background: url('//cdn.shopify.com/s/files/1/0498/9114/7934/t/2/assets/Close.svg?v=11146792670142307055') center center no-repeat;
}

.accordion-close span {
  display: block;
  position: absolute;
  right: 7px;
  top: 25%;
  background: url('//cdn.shopify.com/s/files/1/0498/9114/7934/t/2/assets/Plus.svg?v=1282456203723700691') center center no-repeat;
  padding: 10px;
}

.faqpage div.container {
  max-width: 100%;
  padding: 0;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.faqpage div.content {
  background: #f0f0f0;
  color: #000;
  margin: 0;
  padding: 10px;
  font-size: 0.9em;
  line-height: 1.5em;
  border-radius: 0 0 10px 10px;
}

.faqpage div.content ul {
  padding: 0;
  margin: 0;
}

.faqpage div.content p {
  padding: 0;
  margin: 5px 0 5px;
}

.faqpage div.content ul li {
  list-style-position: inside;
  line-height: 25px;
}
.faqpage div.content img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#mhj-heat-table table, tbody, th, td {
  border: 1px solid black;
  padding: 0 !important;
}

#mhj-heat-table table {
  width: auto !important;
  margin: auto;
  border-collapse: collapse;
}

#mhj-heat-table th, td {
  height: 23px;
  background-color: white;
  text-align: center;
}

#mhj-heat-table #col1 { width: 300px; }
#mhj-heat-table #col2 { width: 125px; }
#mhj-heat-table .heat1 { background-color: #63BE7B; }
#mhj-heat-table .heat2 { background-color: #FFEB84; }
#mhj-heat-table .heat3 { background-color: #FDC07C; }
#mhj-heat-table .heat4 { background-color: #FB9574;...