Support » Fixing WordPress » How to add a background image to a javascript toggle button?

  • Hi guys,

    I’m using WordPress and on one of my category pages i’m trying to allow the user to toggle the visibility of a div at the click of a button. It works perfectly but i would like to add a background image to the toggle button to improve the appearance.

    I can’t seem to figure out how to do this. Here is the code that toggles the div ‘journal’, if anyone could have a look at it and help add the background image code i would be very grateful. Thanks.

    a href=”javascript:void(0);” onclick=”document.getElementById(‘journal-accordion-sub1’).style.display=(document.getElementById(‘journal-accordion-sub1′).style.display==’none’)?’block’:’none’;” class=”toggle”>Open</a

Viewing 6 replies - 1 through 6 (of 6 total)
  • 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?


    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

    		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
    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=””></script>

    <script type=”text/javascript”>




    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!


Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How to add a background image to a javascript toggle button?’ is closed to new replies.