Question

I am using toggleClass and slideToggle to accomplish the following:

when the user selects a link, it will slide down the div, then it will set the link as open, displaying the appropriate background image, this is just a simple, (+) and (-) to open and close the div.

What I am having trouble with, is displaying the background-image to the right of the link, giving it about 5-10px of margin-left, to give it some spacing.

Here is a screen shot of what it is doing: Closed (displaying (+) sign): http://cl.ly/4634afa1e7aa4fe10072

Open (displaying (-) sign): http://cl.ly/8bc59ab07da46a173d62

HTML for link: <a href="#" class="our-future-intro-slide">Mapping Our Future: Strategic Plan 2010-2015</a>

CSS for when it displays the link untouched, and after it is selected:

// link is not open
.our-future-intro-slide {
    background: url('/images/uploads/images/plus_sign.png') no-repeat 120% 0%;
}

// link is open
.our-future-intro-slide-open {
    background: url('/images/uploads/images/plus-icon.png') no-repeat 120% 0%;
}

Here is the jQuery, I figure I’ll throw that in, it works, just the css for making the background-image show up to the right of the text.

$(document).ready(function() {
 $('.our-future-intro-slide').click(function() {
  $(this).toggleClass("our-future-intro-slide-open");
  $(".our-future-intro").slideToggle(100);
 });
});

Answer 1

Try this:

.our-future-intro-slide {
    background: url('/images/uploads/images/plus_sign.png') no-repeat top right;
    padding-right: 30px; /* or whatever the width of the background image is */
}

And, of course, the same modifications for the other rule.