Transition Tool

by mrjordy

HTML

<div class="transitionToolContainer">
  <div class="transitionTool">
    <div class="ttTop">
      <div class="ttTopHow ttTopButton">How to use this</div>
      <div class="ttTopS101 ttTopButton"><a href="https://navy.deps.mil/peoeis/sites/nen/ops/itsm/ITSMDocs/Service%20101%20Template.pptx" class="linkNoStyle">Service101</a></div>
      <div class="ttTopName ttTopButton">File naming convention</div>
      <div class="ttTopQuestionBox">?</div>
      <div class="ttTopExplanation ttTopExplanationHowTo">
      <strong>Instructions to complete this task:</strong> <br>
      1) Click the Service101 link above. Open the PowerPoint and use it as your workbook throughout this task. <br>
      2) Find and click your folder. This is where your documents will go. <br>
      3) Upload your documents, using the file naming convention in the tab above. <br>
      </div>
      <div class="ttTopExplanation ttTopExplanationName">
      The standard naming convention for your documents is: <br><br>
<span style="color:red;">[ServiceName]</span>-<span style="color:green;">[CONTRACT]</span>_<span style="color:blue;">[DocumentType]</span>_<span style="color:#FF5722;">[Version (if applicable)]</span>_<span style="color:purple;">YYYYMMDD</span>
<br> <br> example:<br>
<span style="color:red;">DataStorage</span>-<span style="color:green;">EUHW</span>_<span style="color:blue;">ServiceOrgChart</span>_<span style="color:#FF5722;">0.9</span>_<span style="color:purple;">20190423</span><br><br>
<span style="color:red;">Service Name - </span> can be either the name of your service or the abbreviation, but please stay consistent for document integrity<br>
<span style="color:green;">Contract Name - </span> can be SMIT, EUHW, or NGEN (if neither of the first two)<br>
<span style="color:blue;">Document Type - </span> can be any of the following: <br>
<div class=documentTypePadCheat>Service&nbsp;Synopsis | Service&nbsp;Team | Key&nbsp;Artifacts/Information&nbsp;Work&nbsp;Products |...

CSS

.transitionToolContainer {
  width: 100%;
  position: relative;
  max-width: 1440px;
}

.ttTop {
    min-height: 40px;
    width: calc(100% - 6px);
    background: #3e628f;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    position: relative;
    padding-left: 6px;
}

.ttTopQuestionBox {
    min-height: 32px;
    width: 32px;
    border: 1px solid white;
    border-radius: 3px;
    position: absolute;
    line-height: 32px;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 22px;
    right: 6px;
    top: 6px;
    cursor: pointer;
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.4);
}

.ttTopQuestionBox:hover, .ttTopButton:hover {
    background: #31537c;
}

.ttTopButton {
  height: 26px;
  line-height: 26px;
  padding: 2px 10px;
  color: white;
  display: none;
  border: 1px solid white;
  border-radius: 4px;
  margin: 6px 4px 4px 0;
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.4);
  cursor: pointer;
}

.ttTopExplanation {
  display: none;
}

.showExplanation {
  display: block;
}

.showHelp > .ttTopButton {
  display: inline-block;   
}

.ttTopExplanation {
    background: white;
    margin-top: 2px;
    padding: 4px 8px;
    width: calc(100% - 22px);
}

.documentTypePadCheat {
  padding: 10px;
  color: #333;
  
}

.ttBottom {
  height: 350px;
  width: calc(100% - 12px);
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border: 6px solid #3e628f;
  overflow-y: scroll;
}

.linkNoStyle {
  color: #222;
  text-decoration: none;
}

.ttTopButton > .linkNoStyle {
    color: white;
}

.folderContainer {
  width: 100px;
  display: inline-block;
  vertical-align: top;
  font-family: sans-serif;
  margin: 0 2px;
}

.folderContainer:hover .folderIcon {
  background: linear-gradient(#e3be79, #c8ab76);
}

.folderContainer:hover .folderText {
  color: black;
}

.folderText {
  text-align: center;
  margin-top: 7px;
}

.folderIcon {
  width: 50px;
  height: 35px;
  margin: 0 auto;
  margin-top:...

JavaScript

$('.ttTopQuestionBox').click(function(){
    $('.ttTop').toggleClass("showHelp");
    $('.ttTopExplanationHowTo').removeClass("showExplanation");  
    $('.ttTopExplanationName').removeClass("showExplanation"); 
});
$('.ttTopHow').click(function(){
    $('.ttTopExplanationName').removeClass("showExplanation");
    $('.ttTopExplanationHowTo').toggleClass("showExplanation");
});
$('.ttTopName').click(function(){
$('.ttTopExplanationHowTo').removeClass("showExplanation");
    $('.ttTopExplanationName').toggleClass("showExplanation");
});

//https://navy.deps.mil/peoeis/sites/nen/ops/itsm/ITSMDocs/Service%20101%20Template.pptx