Question

So, What basically I am trying is after clicking on <a> anchor tag I want to change the background of it.

Example : See image below

After clicking on this link I am generating (expanding) one div 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: (black_t_arrow.gif)

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:

.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; }

Following is HTML code:

<p class="expended_div open"><a href="#">Policies</a></p>
    <div class="expand_collapse" style="display:none;">
        <p><?php
      //some php code
    }
    ?></p>
    </div>

How can I achieve this using CSS?

Thanks in advance.

Answer 1

You need two CSS classes, one for the collapse and one for the expanded.

HTML:

<a id="expander" class="close" href="#">Click to collapse/expand</a>

CSS:

.close { background-image: url("/images/collapsed.gif"); }
.open { background-image: url("/images/expanded.gif"); }

JavaScript:

/* Useful for multiple CSS classes. */
$('a#expander').click(function(e){
    e.preventDefault();
    var exp = $(this);
    if (exp.hasClass('open')) {
        exp.removeClass('open').addClass('close');
    } else {
        exp.removeClass('close').addClass('open');
    } 
});

OR:

CSS:

a#expander { background-image: url("/images/collapsed.gif"); } /* set default image */ 
.open { background-images: url("/images/expanded.gif"); }

JavaScript:

/* Swap in/out the class open to override the default background. */
$('a#expander').toggleClass('open');