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>