You need these two lines to make the accordion work


1) This is the first line of the page
<link href="_files/css/red_blue_accordion.css" rel="stylesheet" />

2) This is the last line of the page (put the java script in there so it works in preview mode)
<!-- below is the java script - at end of file -->
<script>// <![CDATA[
var coll = document.getElementsByClassName("collapsible");
    var i;

    for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}
// ]]></script>

--------------- The Code -----------------
<div> 
  <button class="collapsible" type="button">YourTitle</button>
    <div class="content">
      <div><br />
        <p>YourContentHere</p>
      </div>
    </div>
  <button class="collapsible" type="button">YourTitle</button>
    <div class="content">
  <div><br />
      <p>YourContentHere</p>
  </div>
  </div>
</div>

------------------------ Example: gavilan.edu/admit/summer_is_free.php or gavilan.edu/counseling

Here is more example code:
<div>
  <button class="collapsible" type="button">How does it work?</button>
  <div class="content">
  <div><br />
  <p><em> <strong>Who is Eligible?</strong> </em> <br />Your data goes here<br /> 
  <br /> <em> <strong>How many units are free?</strong> </em> <br />More Data here
   <br /> <br /> <em> </div>
  </div>

  <button class="collapsible" type="button">Follow these steps</button>
  <div class="content">
  <div><br />
  <ol>
  <li><a href="https://www.opencccapply.net/gateway/apply?cccMisCode=441">Apply for Admission</a></li>
  <li><a href="/finaid/apply-choose">Fill out the Free Financial Aid Application</a></li>
  <li><a href="/admit/schedule/2023_summer_fall/index">Register for classes</a></li>
  <li><a href="/counseling/index">If you need assistance selecting courses, meet with a counselor</a></li>
  </ol>
  </div>
  </div>


</div>

-------------------- this is the opening RED paragraph -----------
<div class="heading"><strong>WELCOME TO GAVILAN!</strong></div>
<div class="announcements"><strong>View the <a href="http://www.gavilan.edu/admit/schedule/">Classes here</a></strong><br /> Registration is open to <strong>all</strong><hr />
<div class="intro">JOIN US FOR A GREAT ENROLLMENT EVENT<br /> <a href="https://www.gavilan.edu/admit/super_saturday_23.php">SUPER SATURDAY</a><br />
<div class="intro"><img alt="SuperSaturdayHomepageSlider1.jpg" height="280" src="/render/file.act?path=/admit/SuperSaturdayHomepageSlider1.jpg" width="600" /></div>
</div>