oSTEM Accordion Testing

In this example below you will see how to do a oSTEM Accordion Testing with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by janine9vn, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright janine9vn ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>oSTEM Accordion Testing</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
  <h1>oSTEM Annual Conference - Programs & Events</h1>
  <h4> This would be our main page for show casing the events occuring during the annual conference </h4>
  <div class="program">
    <h2> Schedule and Program Descriptions</h2>
    <h4> An actual schedule can go here</h4>

    <!--Main Accordion I -->
    <div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true">
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
          <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse"  href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          <span class="glyphicon glyphicon-plus"></span>  Workshop Blocks
        </a>
      </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
          <div class="panel-body">
            <!--Inside Days Accordion -->
            <div class="panel-group" id="insideAccordion" role="tablist" aria-multiselectable="true">
              <div class="panel panel-default">
                <!--First Panel-->
                <div class="panel-heading" role="tab" id="fridayWBHeading">
                  <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#insideAccordion" href="#fridayWB" aria-expanded="true" aria-controls="collapseFridayWB">
                      Friday Workshop Blocks
                    </a></h4>
                </div>
                <div id="fridayWB" class="panel-collapse collapse" role="tabpanel" aria-labelledby="fridayWBHeading">
                  <p>Name of the Event ....... Time of the Event</p>
                  <p>Description of the Event</p>
                </div>
              <!--End of First Panel -->
                </div>
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingTwo">
            <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
         <span class="glyphicon glyphicon-plus"></span>  Community Breakouts
        </a>
      </h4>
          </div>
          <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
            <div class="panel-body">
              Description of community breakouts
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingThree">
            <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          <span class="glyphicon glyphicon-plus"></span>  Corporate Info Sessions
        </a>
      </h4>
          </div>
          <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
            <div class="panel-body">
              Quick list of available corportate info sessions with possibility of a quick blurb from the companies.
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Exhibitors Section -->
    <div class="exhibitors">
      <h2> Exhibitors/Career Fair</h2>
      <div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingFour">
            <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseThree">
          <span class="glyphicon glyphicon-plus"></span>  Exhibitor List
        </a>
      </h4>
          </div>
          <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
            <div class="panel-body">
              List of Exhibitors
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingFive">
            <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
          <span class="glyphicon glyphicon-plus"></span>  Career Fair Map
        </a>
      </h4>
          </div>
          <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
            <div class="panel-body">
              Self explanatory
            </div>
          </div>
        </div>

      </div>
    </div>
    <!--Awards Section -->
    <div class="awards">
      <h2> Awards</h2>
      <div class="panel-group" id="accordion3" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingSix">
            <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
          <span class="glyphicon glyphicon-plus"></span>  Awards Information & Application
        </a>
      </h4>
          </div>
          <div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
            <div class="panel-body">
              Testing #1
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingSeven">
            <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
          <span class="glyphicon glyphicon-plus"></span>  Previous Award Winners
        </a>
      </h4>
          </div>
          <div id="collapseSeven" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSeven">
            <div class="panel-body">
              Testing #2
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/janine9vn/ostem-accordion-testing-qNKbwp */
.program{
  height: auto;
  width: auto+50px;
  border-color: #C18CD4;
  border-width: 2px;
  border-style: ridge;
  padding: 10px;
  margin-top: 10px;
}
.exhibitors{
    height: auto;
  width: auto+50px;
  border-color: #8CAAD4;
  border-width: 2px;
  border-style: ridge;
  padding: 5px;
  margin-top: 10px;
}
.awards{
    height: auto;
  width: auto+50px;
  border-color: #8CD48E;
  border-width: 2px;
  border-style: ridge;
  padding: 5px;
  margin-top: 10px;
  
}
.container{
  padding: 10px;
  height:auto;
  width: 720px;
}

Comments