Need help changing arrow direction in CSS3 push down panel

[eohare]

I have the css - but I am not sure how to apply it.
http://www.dynamicdrive.com/style/csslibrary/item/pure_css3_push_down_panel
Thanks in advance!

[eohare]

I'd like the arrow to point up after the user clicks to show the content :D

[ddadmin]

Sure, try adding the following rule to the end of the CSS:


div.css3droppanel input[type="checkbox"]:checked ~ label:after{
border-color: transparent transparent white transparent;
top: 5px;
}

[eohare]

Thanks! This got me in the right direction. Below are the 2 sections to make it work in my css file:


div.css3droppanel input[type="checkbox"]:not(:checked)~ label:before { /* generated down arrow */
content: '';
position: absolute;
display: block;
width: 0;
height: 0;
border: 12px solid transparent;
border-color: white transparent transparent transparent;
top: 13px;
left: 9px;
box-shadow: 0 0 7px gray inset;

margin-right: 10%; /* added to move arrow to the left */


}
div.css3droppanel input[type="checkbox"]:checked ~ label:after{ /* generated up arrow */
content: '';
position: absolute;
display: block;
width: 0;
height: 0;
border: 12px solid transparent;
border-color: transparent transparent white transparent;
top: -1px;
left: 9px;
box-shadow: 0 0 7px gray inset;

margin-right: 10%; /* added to move arrow to the left */

}