CSS Accordion Effect - Animation Idea #9

  • 31 January 2022
  • 2 replies
  • 524 views

Userlevel 7
Badge +5

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.

CSS Accordion Effect

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>

 


2 replies

Userlevel 4
Badge

Love that effect!  I have been asked to create something where someone selects a role then a product and a list of recommended training is provided.  Do you have any suggestions for where to start with this type of request?  

Userlevel 7
Badge +5

@Sdinnoce - I will look at trying to do another write up next week on another accordion panel that might be better suited to your needs.

Reply