WordPress.org

Ready to get started?Download WordPress

Forums

How to add a background image to a javascript toggle button? (7 posts)

  1. paa1605
    Member
    Posted 3 years ago #

    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

  2. rebelit
    Member
    Posted 3 years ago #

    in your css file...

    .toggle {
      background: url('path to image') left top no-repeat;
    }
  3. paa1605
    Member
    Posted 3 years ago #

    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.

  4. rebelit
    Member
    Posted 2 years ago #

    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

  5. paa1605
    Member
    Posted 2 years ago #

    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?

  6. rebelit
    Member
    Posted 2 years ago #

    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.

  7. paa1605
    Member
    Posted 2 years ago #

    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="http://code.jquery.com/jquery-latest.js"></script>

    <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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.