ProductBoxes

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>
HTML
---------

<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: 100%; margin-left: auto; margin-right:auto; position:relative; margin-top:40%;">
    <div id="toggler">
      <div id="effect" >
          <h3><img src="http://www.benedictgrouptest.com/LFNLogo.png" style="width: 75px; height: 75px;"/></h3>

        <p>
          Loan servicing, loan accounting, and investor reporting software for commercial, multi-family, consumer, and other complex loans.
        </p>
           </div>
        </div>

    <div id="toggler2">
      <div id="effect2" >
          <h3><img src="http://www.benedictgrouptest.com/FFNLogo.png" style="width: 75px; height: 75px;"/></h3>
        <p style="white">
      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" >
          <h3><img src="http://www.benedictgrouptest.com/ELLogo.png" style="width: 75px; height: 75px;"/></h3>
        <p style="white">
            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" >
          <h3><img src="http://www.benedictgrouptest.com/SFNLogo.png" style="width: 75px; height: 75px;"/></h3>
        <p style="white">
      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>
   ...

CSS

.toggler {
    width: 25%;
    height: 200px;
    position: relative;
}
.toggler2 {
    width: 25%;
    height: 200px;
    position: relative;
}
.toggler3 {
    width: 25%;
    height: 200px;
    position: relative;
}
.toggler4 {
    width: 25%;
    height: 200px;
    position: relative;
}
#effect {
    width: 25%;
    height: 225px;
    position: relative;
    background: -webkit-linear-gradient(rgba(255,0,0,0), #097AB4); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(rgba(255,0,0,0), #097AB4); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(rgba(255,0,0,0), #097AB4); /* For Firefox 3.6 to 15 */
    background: linear-gradient(rgba(255,0,0,0), #097AB4); /*Standard*/

    float:left;
    text-align:center;
}

#effect h3 {
    margin-left:10px;
    margin-right:10px;
    text-align: center;

}

#effect2 {
    width: 25%;
    height: 225px;
    position: relative;
    background: -webkit-linear-gradient(white, blue); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(white, gray); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(white, gray); /* For Firefox 3.6 to 15 */
    background: linear-gradient(rgba(255,0,0,0), #097AB4); /*Standard*/
    float:left;
}

#effect2 h3 {
    margin-left:10px;
    margin-right:10px;
    text-align: center;

}
#effect3 {
    width: 25%;
    height: 225px;
    position: relative;
    background: -webkit-linear-gradient(white, blue); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(white, gray); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(white, gray); /* For Firefox 3.6 to 15 */
    background: linear-gradient(rgba(255,0,0,0), #097AB4); /*Standard*/
    float:left;
}

#effect3 h3 {
    margin-left:10px;
    margin-right:10px;
    text-align: center;

}
#effect4 {
    width: 25%;
    height: 225px;
    position: relative;
    background: -webkit-linear-gradient(white, blue); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(white,...

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: "25%",
              }, 1000);
              $("#effect3").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: "25%",
              }, 1000);
              $("#effect4").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: "25%",
              }, 1000);

              $("#effect").animate({
                  backgroundColor: "#E6F7FF",
                  color: "white",
                  width: "100%",



              }, 1000);
          } else {
              $("#effect2").show({
                  duration: 1000
              });
              $("#effect3").show({
                  duration: 1000
              });
              $("#effect4").show({
                  duration: 1000
              });
              $("#effect").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: "25%"
              }, 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",
                  color:...