nesd widget

by mrjordy

HTML

<content class="fullPage">
  <div class="infoTab redBack pillowed">Check back for any system outages</div>
  <header>
    <section class="welcomeTo blueBack pillowed"><div class="welcomeToText inline">Welcome to</div><img src="https://s3.amazonaws.com/www.nesdnow.navy.mil/images/NESDlogo.png" height="128" width="auto"></section>
    <section class="redBar pillowed"></section>
    <section class="pictureRow">
      <img src="https://s3.amazonaws.com/www.nesdnow.navy.mil/images/NESD2_01.png" height="100" width="auto">
      <img src="https://s3.amazonaws.com/www.nesdnow.navy.mil/images/NESD2_02.png" height="100" width="auto">
      <img src="https://s3.amazonaws.com/www.nesdnow.navy.mil/images/NESD2_03.png" height="100" width="auto">
      <img src="https://s3.amazonaws.com/www.nesdnow.navy.mil/images/NESD2_04.png" height="100" width="auto">
      <img src="https://s3.amazonaws.com/www.nesdnow.navy.mil/images/NESD2_05.png" height="100" width="auto">
      <img src="https://s3.amazonaws.com/www.nesdnow.navy.mil/images/NESD2_06.png" height="100" width="auto">
      <img src="https://s3.amazonaws.com/www.nesdnow.navy.mil/images/NESD2_07.png" height="100" width="auto">
      <img src="https://s3.amazonaws.com/www.nesdnow.navy.mil/images/NESD2_08.png" height="100" width="auto">
      <img src="https://s3.amazonaws.com/www.nesdnow.navy.mil/images/NESD2_09.png" height="100" width="auto">
      <img src="https://s3.amazonaws.com/www.nesdnow.navy.mil/images/NESD2_10.png" height="100" width="auto">
      <img src="https://s3.amazonaws.com/www.nesdnow.navy.mil/images/NESD2_11.png" height="100" width="auto">
      <img src="https://s3.amazonaws.com/www.nesdnow.navy.mil/images/NESD2_12.png" height="100" width="auto">
      <img src="https://s3.amazonaws.com/www.nesdnow.navy.mil/images/NESD2_13.png" height="100" width="auto">
    </section>
    <section class="redBar pillowed"></section>
    <section class="blurbRow blueBack pillowed">The NESD effort consists of consolidating...

CSS

.fullPage {
  font-family: kalinga;
  font-size: 14px;
  display: block;
  position: relative;
  min-width: 550px; 
}

/*------------- top --------------------------------------------------------*/
.infoTab {
height: 30px;
color: white;
font-weight: bold;
text-align: center;
line-height: 30px;
}

/*------------- masthead --------------------------------------------------------*/
.welcomeTo {
 height: 160px;
 color: white;
 font-size: 60px;
 font-weight: bold;
 line-height: 160px;
 text-align: center;
}

.welcomeTo > img {
    vertical-align: middle;
    padding-left: 20px;
}
@media only screen and (max-width: 900px) {
  .welcomeToText {
    display: none;
  }
}
/*------------- pictures --------------------------------------------------------*/

.pictureRow {
  height: 100px;
  overflow: hidden;
  padding: 4px 0;
  text-align: center;
}


/*------------- blurb --------------------------------------------------------*/
.blurbRow, .blurb2Row {
  height: auto;
  padding: 20px 60px;
  color: white;
  text-align: center;
}

/*------------- nav --------------------------------------------------------*/
.navRow {
  padding-top: 20px;
}
.aboutRow {
  font-family: kalinga;
  font-size: 14px;
}

.navWidgetContainer {
    padding: 10px;
    display: inline-block;
    vertical-align: top;
}

.navWidget {
  position: relative;
  border-radius: 10px;
  padding: 10px;
  width: 350px;
  cursor: pointer;
}

#navWidget2 .navWidgetHeader::after {
    background: url(https://s3.amazonaws.com/www.nesdnow.navy.mil/images/cardChip.png);
    background-repeat: no-repeat;
    content: '';
    display: block;
    position: absolute;
    height: 20px;
    width: 22px;
    top: 14px;
    right: 30px;
}
#navWidget1 .navWidgetHeader::before {
    background: url(https://s3.amazonaws.com/www.nesdnow.navy.mil/images/nav247.png);
    background-repeat: no-repeat;
    content: '';
    display: block;
    position: absolute;
    height: 28px;
    width: 28px;
    top: 10px;
    left: 10px;
   ...

JavaScript

$(document).ready(function() {
  $('#navWidget1').click(function() {
    $('#navWidget1').toggleClass('widgetOpen');
    $('#navWidget2').removeClass('widgetOpen');
  });
  $('#navWidget2').click(function() {
    $('#navWidget2').toggleClass('widgetOpen');
    $('#navWidget1').removeClass('widgetOpen');
  });
  $('#navWidget3').click(function() {
    $('#navWidget3').toggleClass('widgetOpen');
    $('#navWidget1, #navWidget2').removeClass('widgetOpen');
    $(".aboutPane").slideToggle(300);
  });
});