AnimateBoxes

by Tom Scott

HTML

<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<body>
    <div id="backimage"><img src="http://www.benedictgrouptest.com/mountainswater.jpg" style="width:100%; z-index:  0; top:0; left:0; position:absolute;"/>
    <div id="wrapper" style="width: 740px; margin-left: auto; margin-right:auto; position:relative; margin-top:40%;">
    <div id="toggler">
      <div id="effect" class="ui-widget-content ui-corner-all">
        <h3 class="ui-widget-header ui-corner-all">LOANS! For .Net</h3>
        <p style="color:#292929">
          Etiam libero neque, luctus a, eleifend nec, semper at, lorem.     Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
        </p>
      </div>
    </div>
    <div id="toggler2">
      <div id="effect2" class="ui-widget-content ui-corner-all">
        <h3 class="ui-widget-header ui-corner-all">FEES! For .Net</h3>
        <p>
      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
        </p>
      </div>
    </div>
        <div id="toggler3">
      <div id="effect3" class="ui-widget-content ui-corner-all">
        <h3 class="ui-widget-header ui-corner-all">EdLOANS!</h3>
        <p>
            Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vit        </p>
      </div>
    </div>
            <div id="toggler4">
      <div id="effect4" class="ui-widget-content ui-corner-all">
        <h3 class="ui-widget-header ui-corner-all">Settlements!</h3>
        <p>
      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
        </p>
      </div>
    </div>
    </div>
    </div>


</body>

CSS

.toggler {
    width: 240px;
    height: 200px;
    position: relative;
}
.toggler2 {
    width: 240px;
    height: 200px;
    position: relative;
}
.toggler3 {
    width: 240px;
    height: 200px;
    position: relative;
}
.toggler4 {
    width: 240px;
    height: 200px;
    position: relative;
}
#effect {
    width: 160px;
    height: 225px;
    padding: 0.4em;
    margin-left: 5px;
    margin-right: 5px;
    position: relative;
    background: #fff;
    float:left;
    color:#434343;
    opacity:.8;
    text-align:center;
}

#effect h3 {
    margin: 0;
    padding: 0.4em;
    text-align: center;
    color:#012058;
    opacity:1;
}


#effect2 {
    width: 160px;
    height: 225px;
    padding: 0.4em;
    margin-left: 5px;
    margin-right: 5px;
    position: relative;
    background: #fff;
    float:left;
}
#effect2 h3 {
    margin: 0;
    padding: 0.4em;
    text-align: center;
}
#effect3 {
    width: 160px;
    height: 225px;
    padding: 0.4em;
    margin-left: 5px;
    margin-right: 5px;
    position: relative;
    background: #fff;
    float:right;
}
#effect3 h3 {
    margin: 0;
    padding: 0.4em;
    text-align: center;
}
#effect4 {
    width: 160px;
    height: 225px;
    padding: 0.4em;
    margin-left: 5px;
    margin-right: 5px;
    position: relative;
    background: #fff;
    float:right;
}
#effect4 h3 {
    margin: 0;
    padding: 0.4em;
    text-align: center;
}
a {
    text-decoration:none;
}

JavaScript

$(function () {
      var state = true;
      $("#toggler").click(function () {
          if (state) {
              $("#effect2").hide({
                  duration: 1000
              });
              $("#effect3").hide({
                  duration: 1000
              });
              $("#effect4").hide({
                  duration: 1000
              });
              $("#effect2").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: 160,
              }, 1000);
              $("#effect3").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: 160,
              }, 1000);
              $("#effect4").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: 160,
              }, 1000);

              $("#effect").animate({
                  backgroundColor: "#D1F4FF",
                  color: "#fff",
                  width: 500,
                  opacity:.7
              }, 1000);
          } else {
              $("#effect2").show({
                  duration: 1000
              });
              $("#effect3").show({
                  duration: 1000
              });
              $("#effect4").show({
                  duration: 1000
              });
              $("#effect").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: 160
              }, 1000);

          }
          state = !state;
      });
      var state2 = true;
      $("#toggler2").click(function () {
          if (state2) {
              $("#effect").hide({
                  duration: 1000
              });
              $("#effect3").hide({
                  duration: 1000
              });
              $("#effect4").hide({
                  duration: 1000
              });
              $("#effect").animate({
                  backgroundColor: "#fff",
             ...