Question

I have a div that I want to toggle between displaying or not when a user clicks on a piece of text. I have a javascript function that toggles a div on or off. That works fine. What I don’t know how to do is to have a triangle that points to the right or down depending on whether the div is open.

My HTML looks like this:

<a onclick="toggleDiv('myDiv');">Click here to expand or close div</a>
<div id="myDiv" style="display:none">
   ...
</div>

How do I add one of those triangles and have it point the right way, ideally with just HTML, Javascript, and CSS? The triangle would appear to the left of the “Click here…” string.

Thanks.

Answer 1

You can also have an image sprite, which is a single image that has both of the arrows, preventing the need for fetching two images. Use CSS to change the position of the background image so that only one shows at a time. For example, here is one state:

#triangle {
    background-image: url(triangle.png);
    background-repeat: no-repeat;
    background-position: 0 0;
}

then use javascript to add a CSS class or directly manipulate to:

    background-position: 15px 0;

or similar to shift the next triangle into place.