Hi everyone,

I have a set of "buttons" that expand/collapse information onClick, using Javascript that look like this...



Here is the CSS I used to create the look of the "buttons"...

Code:
div.btn_workshops {
	background-image: url(../images/btn_workshops_mid.gif);
	background-position: top left;
	background-repeat: repeat-x;
	cursor: pointer;
	height: 22px;
	margin-bottom: 1px;
	width: 330px;
}
div.btn_workshops_lt {
	background-image: url(../images/btn_workshops_lt.gif);
	background-position: 0 0;
	background-repeat: no-repeat;
	height: 100%;
	width: 100%px;
}
div.btn_workshops_rt {
	background-image: url(../images/btn_workshops_rt.gif);
	background-position: 100% 0;
	background-repeat: no-repeat;
	height: 100%;
	padding: 3px 12px 0px 12px;
	width: 100%px;
}
.hide {
	display: none;
	visibility: hidden;
}
.show {
	display: block;
	visibility: visible;
}
Here is the HTML that contains the "buttons" and the text that will appear when you click on the "buttons" to expand them. Keep in mind that everything collapses when you click on any of the "buttons" a second time. This is done, using Javascript.

Code:
<div class="btn_workshops" onclick="expandWorkshops('workshop1');flipArrow('arrow1')">
                                    	<div class="btn_workshops_lt">
                                        	<div class="btn_workshops_rt">
                                        		<span class="workshops_hd">Basic Ceramics</span> - Jennifer Thompson
                                                <img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow1" />
											</div>
										</div>
									</div>
                                    <div id="workshop1" class="hide">Instructor: Jennifer Thompson<br />
                                        Dates: October 9, 16, 23, and 30<br />
                                        Hours: 2:30pm - 5:30pm<br />
                                        Tuition: $250</p>
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
									</div>
                                    <div class="btn_workshops" onclick="expandWorkshops('workshop2')">
                                    	<div class="btn_workshops_lt">
                                        	<div class="btn_workshops_rt">
                                        		<span class="workshops_hd">Head Drawing and Painting</span> - Daniel Shoreman
                                                <img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow2" />
											</div>
										</div>
									</div>
                                    <div id="workshop2" class="hide">Instructor: Jennifer Thompson<br />
                                        Dates: 2/19, 2/26, 3/5, and 3/12<br />
                                        Time: 10am - 1pm<br />
                                        Tuition: $275
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
									</div>
                                    <div class="btn_workshops" onclick="expandWorkshops('workshop3')">
                                    	<div class="btn_workshops_lt">
                                        	<div class="btn_workshops_rt">
                                        		<span class="workshops_hd">Figure Drawing</span> - Tom Hampton
                                                <img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow3" />
											</div>
										</div>
									</div>
                                    <div id="workshop3" class="hide">Instructor: Tom Hampton<br />
                                        Dates: August 7 and 14<br />
                                        Time: 9am - 4pm<br />
                                        Tuition: $150
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
									</div>
                                    <div class="btn_workshops" onclick="expandWorkshops('workshop4')">
                                    	<div class="btn_workshops_lt">
                                        	<div class="btn_workshops_rt">
                                        		<span class="workshops_hd">Photographing Portraits</span> - Susan Lilianas
                                                <img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow4" />
											</div>
										</div>
									</div>
                                    <div id="workshop4" class="hide">Instructor: Susan Lilianas<br />
                                        Dates: February 19 - April 23<br />
                                        Time: 6pm - 9pm<br />
                                        Tuition: $200
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
									</div>
                                    <div class="btn_workshops" onclick="expandWorkshops('workshop5')">
                                    	<div class="btn_workshops_lt">
                                        	<div class="btn_workshops_rt">
                                        		<span class="workshops_hd">Still Life Oil Painting</span> - Daniel Shoreman
                                                <img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow5" />
											</div>
										</div>
									</div>
                                    <div id="workshop5" class="hide">Instructor: Susan Lilianas<br />
                                        Dates: June 5, 12, 19, and 26<br />
                                        Time: 10am - 1pm<br />
                                        Tuition: $200
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
									</div>
Here is the JavaScript I used to create the expand/collapse effect...

Code:
//Expand Workshops
function expandWorkshops(obj) {
	var workshop = document.getElementById(obj)
	if ( workshop.className != "hide" )
		{ workshop.className = 'hide' }
	else { workshop.className = 'show'	}
}
Here is my problem. I added the downward, red arrows to give users a "hint" that the "buttons" will do some action if you click on them. By default, I have the arrows facing down to show that information will appear below the "button." Then once a user has expanded a block of information, I want the downward, red arrow to change to an upward, red arrow. I currently have that working, but it is only working "one way." In other words, when you click on any one of the "buttons," the arrow does change, but it does not change back to the default when you click on a "button" a second time to collapse the information.

Here is what it looks like with one of the "buttons" expanded. As you can see, I was successfully able to change the downward arrow to an upward arrow after the information expanded below. This helps show that the text can collapse upward if you click on the "button" a second time. Again, my problem is I am unable to get the upward arrow to return to its default, downward arrow appearance.



This is what it currently looks like when you click on the "button" a second time to collapse the information. As you can see, my expand/collapse effect works, and the text goes away, but I am unable to get the upward arrow to change back to the default, downward arrow.



This is the function that I added to my JavaScript, which successfully changes the arrow from down to up onClick, but fails to return the arrow image to default when you click again.

Code:
function flipArrow() {
	if ( document.images("arrow1").src = "static/images/arrow_down.gif" )
		{ document.images("arrow1").src = 'static/images/arrow_up.gif' }
	else if ( document.images("arrow1").src = "static/images/arrow_up.gif" )
		{ document.images("arrow1").src = 'static/images/arrow_down.gif' }
}
This is the full JavaScript that includes the expand/collapse effect and the unsuccessful swap arrow effect so you can everything together.

Code:
//Expand Workshops
function expandWorkshops(obj) {
	var workshop = document.getElementById(obj)
	if ( workshop.className != "hide" )
		{ workshop.className = 'hide' }
	else { workshop.className = 'show'	}
}
function flipArrow() {
	if ( document.images("arrow1").src = "static/images/arrow_down.gif" )
		{ document.images("arrow1").src = 'static/images/arrow_up.gif' }
	else if ( document.images("arrow1").src = "static/images/arrow_up.gif" )
		{ document.images("arrow1").src = 'static/images/arrow_down.gif' }
}
The flipArrow function I wrote is just my latest attempt. Believe me, I've tried all kinds of things, including "if else," "if else if," "if." I've tried Variables, getElementById, and switched out all different kinds of methods and ID's. No matter what, I can't seem to get any combination to work. Don't get me wrong. One of the previous methods I tried might have been the correct one, but I most likely did not write it correctly. I am no JavaScript expert at all. The code that I currently have was partly found on the Internet and partly modified by me after hours and hours of research and troubleshooting. I'm very proud that I was able to get this far, but I'm getting to the point where I am spending all day and night, every day, trying to figure this out. I always search forums before posting in them. This is probably the second time I've ever posted in a forum. I hope it helps. Sorry to ramble on. I just want to make sure you have as many details and samples as possible so I do not get any questions or confusion.

Thanks for your help!