CSS Accordion Effect - Animation Idea #9

In this example, we have a set of five divs arranged horizontally. When you click on a colored div and hold, it will reveal the “rest of the box”.

This is perhaps an “expansion” of the click to reveal box in Idea #8.

Someone more fluent than I am may have an easier way to pull this off but I’ve been having a good time playing around with these ideas and thought many of you might benefit from that as well.

This is what I ended up with.

Here is the code for you to play with.

/* Accordion */
/* This is the CSS for the Branding and Look section */

.accBox {
  width: 25px;
  height: 175px;
  margin: 25px;
  padding: 10px;
  position: absolute;
  white-space: nowrap;
  top: 0px;
  color: #ffffff;
}

#one {
  left: 0px;
  background-color: #000000;
}

#two {
  left: 45px;
  background-color: #ff0000;
}

#three {
  left: 90px;
  background-color: #00ff00;
}

#four {
  left: 135px;
  background-color: #0000ff;
}

#five {
  left: 180px;
  background-color: #5f6369;
}

#one:active {
    width: 250px;
}

#one:active ~ #two {
    left: 270px;
}

#one:active ~ #three {
    left: 315px;
}

#one:active ~ #four {
    left: 360px;
}

#one:active ~ #five {
    left: 405px;
}

#two:active {
    width: 250px;
}

#two:active ~ #three {
    left: 315px;
}

#two:active ~ #four {
    left: 360px;
}

#two:active ~ #five {
    left: 405px;
}

#three:active {
    width: 250px;
}

#three:active ~ #four {
    left: 360px;
}

#three:active ~ #five {
    left: 405px;
}

#four:active {
    width: 250px;
}

#four:active ~ #five {
    left: 405px;
}

#five:active {
    width: 250px;
}

Here is the HTML

<!-- This is the HTML for the widget -->

<div>
<div id="one" class="accBox">
This is box 1
</div>

<div id="two" class="accBox">
This is box 2
</div>

<div id="three" class="accBox">
This is box 3
</div>

<div id="four" class="accBox">
This is box 4
</div>

<div id="five" class="accBox">
This is box 5
</div>

</div>