McAtee 2

by mrjordy

HTML

<div class="accordionMenu">
  <div class="accordionShowAll">Show Entire Document</div>
  <div class="accordionHideAll">Collapse All</div>
  <div class="accordionBlufsOnly">Quick Synopsis</div>
  <div class="accordionPerson1">Person 1</div>
  <div class="accordionPerson2">Person 2</div>
  <div class="accordionPerson3">Person 3</div>
</div>

<! –– SNote: no extra divs are allowed within accordionContainer. p, a, span, strong, mark, em, img, lists, and tables only ––>

<div class="accordionContainer">

<! ––------------------------------------------------------------------------------------------- SectionBreak –--------------------------------------------------------–>
  <div class="accordionTrigger">1. Introduction to the Navy Cloud Technical Integration Guide</div>
  <div class="accordionTriggerBluf">BLUF</div>
  <div class="accordionSectionBluf">Brief Synopsis of this section</div>
  <div class="accordionSection">The purpose of this Navy Cloud Technical Integration Guide (TIG) is to help Mission Owners (MOs) plan, design, test, and execute the migration of their application portfolio to the Cloud environment. The TIG provides current state technical, engineering/development direction in support of acquisition to augment the process-level information published in the Program Executive Office – Enterprise Information Systems (PEO-EIS) Navy Cloud Onboarding Guide (COG). The latest versions of the COG and TIG documents are available from PEO-EIS upon request.
<br><br>
The COG is designed as a high-level, initial Cloud Computing Adoption Aid. The TIG is intended to be a secondary resource focused on the corresponding technical and systems integration guidance and best practices aligned with the high-level process content in the COG. The assumption is the reader is already familiar with the latest version of the COG.</div>
  
<! ––------------------------------------------------------------------------------------------- SectionBreak...

CSS

::selection {
  background: teal;
  color: white;
}

.indent1::before {
  content: '';
  display: inline-block;
  width: 10px;
}
.indent2::before {
  content: '';
  display: inline-block;
  width: 20px;
}
.indent3::before {
  content: '';
  display: inline-block;
  width: 30px;
}
.accordionContainer {
  padding: 20px;
  font-family: sans-serif;
}

.accordionTrigger {
  background: #eee;
  padding: 8px;
  cursor: pointer;
  margin: 3px 1px;
  width: calc(100% - 100px);
  display: inline-block;
  border-left: 0px solid white;
  transition: 0.2s;
}
.accordionTrigger:hover {
  border-left: 3px solid teal;
}

.accordionTriggerBluf {
  width: 50px;
  display: inline-block;
  background: teal;
  text-align: center;
  padding: 8px;
  color: white;
  cursor: pointer;
}
.accordionSectionBluf {
  display: none;
  color: teal;
  padding: 10px 4px;
}
.accordionSection {
  display: none;
  padding: 10px 4px 20px;
  line-height: 22px;
}

.accordionSection th {
  background: teal;
  color: white;
}

.accordionSection ul {
  list-style: none;
}

.accordionSection li {
  padding: 5px;
}

.accordionSection ul li::before {
  content: "\2022";
  color: teal;
  font-weight: bold;
  display: inline-block;
  width: 16px;
  margin-left: -16px;
}

.accordionSection a {
  color: teal !important;
  cursor: pointer;
}
.accordionSection table, .accordionSection th, .accordionSection td {
  border: 1px solid #ddd;
  padding: 5px;
  margin-left: auto;
  margin-right: auto;
}

JavaScript

$(".accordionHideAll").click(function(){
  $(".accordionSection, .accordionSectionBluf").slideUp().removeClass("accordionOpen");
});
$(".accordionShowAll").click(function(){
  $(".accordionSection, .accordionSectionBluf").slideDown().addClass("accordionOpen");
});
$(".accordionBlufsOnly").click(function(){
  $(".accordionSectionBluf").slideDown().addClass("accordionOpen");
  $(".accordionSection").slideUp().addClass("accordionOpen");
});

$(".accordionTrigger").click(function(){
  $(this).nextAll().eq(2).slideToggle().toggleClass("accordionOpen");
});
$(".accordionTriggerBluf").click(function(){
  $(this).nextAll().eq(0).slideToggle().toggleClass("accordionOpen");
  $(this).nextAll().eq(1).slideUp().removeClass("accordionOpen");
});