So, What basically I am trying is after clicking on \[code\]<a>\[/code\] anchor tag I want to change the background of it. Example : See image below
After clicking on this link I am generating (expanding) one \[code\]div\[/code\] tag exactly below to it and displaying the polices on it.I want to expand arrow turn when expanding/collapsing like :See Image below: Image Name: \[code\](black_t_arrow.gif)\[/code\]
So that It will display image down arrow image when policies link is collapsed and again vice versa after clicking on Policies link it should hide that down arrow image with original one means it should return to the previous state.Following is my CSS code:\[code\].expended_div{ float:left; width:100%; padding:10px 0}.expended_div a{ color:#000; font-size:11px; text-decoration:underline; margin-left:15px; font-weight: bold; background-image: url("/common/images/black_t_arrow.gif"); background-position: 0 2px; background-repeat: no-repeat; padding-left: 9px;}.expended_div a:hover{ text-decoration:underline}.expand_collapse{ float:left; padding:10px 20px; }\[/code\]Following is HTML code:\[code\]<p class="expended_div open"><a href="http://stackoverflow.com/questions/14472732/#">Policies</a></p> <div class="expand_collapse" style="display:none;"> <p><?php //some php code } ?></p> </div>\[/code\]How can I achieve this using CSS?Thanks in advance.