How to add a background image to a javascript toggle button?

in your css file…

.toggle {
  background: url('path to image') left top no-repeat;
}

Sorry i just re-read my post and i realised i haven’t explained myself very well. There is an image already applied to the toggle button through the css file as mentioned in rebelit’s reply. What i would like to do is change this background image to another one when the button is clicked. E.g a background image on the toggle button when the div is hidden, and a different image on the button when the div is visible.

How is this possible?

Thanks.

Modify the javascript to append or remove a 2nd class “toggleOpen” for example

and add to the css

.toggleopen {
   background: url('path to clicked image') left top no-repeat;
}

This is easy to do using jQuery, but I’m not familiar with straight javascript

Thanks for the reply rebelit.

Im also not very familiar with javascript and found the code i’m currently using from an old forum post as it was ideal for what i originally intended. I’ve tried a few different modifications to the javascript code but neither have worked. You say its easy to do using jquery? Would you mind expanding on this and pointing me in the right direction as to how i can accomplish the background image change using this method?

In a .js file

jQuery(document).ready(function($){
	$(".fold_entry").click(function(){
		$(this).toggleClass("active");
		$(this).next().next().slideToggle("slow");
		return false;
	});
 });

Something a bit like this code would do it.

Where the corresponding css classes are
.fold_entry -> the div that acting as the button
.active -> the class which changes the image on

the line
$(this).next().next().slideToggle("slow");
actually hides the next but one element which happens to be the div I am toggling.

Checkout the jQuery site and work through a couple of tutorials.

the jQuery library is already loaded in WP I think.

Ok, i’ve had a go with jquery and i’ve got the background image to change when clicked, but now the problem i have is that the ul won’t show/hide when the button is clicked!

I have the following code in my category file;

<script type=”text/javascript” src=”https://code.jquery.com/jquery-latest.js”></script&gt;

<script type=”text/javascript”>

$(document).ready(function(){
$(“ul#journal”).hide();
$(“.toggle”).click(function(){
$(this).toggleClass(“active”).next().slideToggle(“slow”);
});
});

</script>

Open

And the area that i am trying to hide/show when the link is clicked is named;

<ul id=”journal”>

Can you see what could be causing the problem? I solved my original dilemma but am faced with a new one!

Thanks