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/cs...ush_down_panel
Thanks in advance!

[eohare]

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

[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 */
		
}