How to change / alternate the background-position of an image on slideToggle()?

Question

I found the code to open/close the div when I click a certain button. Now I also want to make not only the div open/close but the open/close button change from a down arrow to an up arrow.

This is what I have so far excuse me if my post is not correct as this is my first post.

The image is height = 60px and width = 30px. The up arrow is on one half and down arrow is on the other half.

<style>
.content_toggle {
background: url(toggle-btn.png);
background-color: rgba(0, 0, 0, 0.9);
position: absolute;
cursor: pointer;
bottom: 62px;
left: 850px;
height: 30px;
width: 30px;
}
</style>


<body>
<div class="content_toggle" style="display: block;"></div>

<script>
$("div.content_toggle").click(function () {
  $("div.content").slideToggle("slow");
});
</script>

<div class="content">content, content, content</div>
</body>

This is a helpful post: http://stackoverflow.com/questions/1062731/jquery-toggle-to-change-image. And this: http://stackoverflow.com/questions/4840635/jquery-button-click-change-image?rq=1 — Nick, Jun 16 '12 at 22:15
Anthony - to keep everyone onside you want to tick your preferred answer and +1 (up arrow) liberally as soon as you have enough rating :) The community can get a bit vicious to those who fail to do so. — Nick, Jun 17 '12 at 03:56
No worries - just don't take it to heart if you get -1 once in a while :) — Nick, Jun 17 '12 at 06:20

pete · Accepted Answer · 2012-06-19T02:25:16.263

4

Use a class for "arrow up" and another for "arrow down", then toggle between them as you toggle div visibility:

<style>
    .content_toggle {
        background-color: rgba(0, 0, 0, 0.9);
        position: absolute;
        cursor: pointer;
        bottom: 62px;
        left: 850px;
        height: 30px;
        width: 30px;
    }
    .arrow-up {
        background: url(toggle-btn.png);
        background-position: 0 0;
    }
    .arrow-down {
        background: url(toggle-btn.png);
        background-position: 0 -30;
    }
</style>
<body>
    <div class="content_toggle arrow-up" style="display: block;"></div>
    <script>
        $(document).ready(function () {
            $("div.content_toggle").click(function() {
                var self = $(this); //cache jQuery object
                $("div.content").slideToggle("slow");
                if (self.hasClass("arrow-up")) {
                    self.removeClass("arrow-up").addClass("arrow-down");
                } else {
                    self.removeClass("arrow-down").addClass("arrow-up");
                }
            });
        });
    </script>
    <div class="content">content, content, content</div>
</body>

edited Jun 19 '12 at 02:25

answered Jun 16 '12 at 22:16

pete

24,141
4
37
51

I think the images are in the same image file not in 2 separate ones. Positioning the image in each class would probably be better in that case. Similar to what `galchen` mentioned. – Nope Jun 16 '12 at 22:17
Yes, it appears the images are in one file, although it is probably preferable and is certainly more standard to use two images :) – Nick Jun 16 '12 at 22:20
Then define the "arrow up" and "arrow down" classes appropriately (i.e., same image, but different positioning). The principle is the same. – pete Jun 16 '12 at 22:28
@Nick not sure about that being standard. I'm more used to sprites and css positioning myself as standard. But that's another discussion :) – Nope Jun 16 '12 at 23:18
This demonstration wasn't working either. Only galchen's is working for me. – Anthony Russo Jun 17 '12 at 00:50
@AnthonyRusso: I apologize. I misread which div needed the class toggled. Corrected code in update. Here's a working fiddle: http://jsfiddle.net/cga4L/ (although I had to change the `bottom` and `left` properties of the `.content_toggle` class in the fiddle to make sure no scrolling was needed). – pete Jun 17 '12 at 01:34
@FrançoisWahl I bow to your expertise on what is standard and retract :) – Nick Jun 17 '12 at 03:54
@Nick Not sure if that was being sarcastic or not but so far the projects I was involved in the style-guys used sprites and exposed separate styles for sprite sheets and positioning. However if that is `the` standard I don't know at all. It just has been `a` standard for me personally. In the end, what ever works, works :) – Nope Jun 17 '12 at 12:57
@FrancoisWahl No sarcasm at all. I'd just assumed from what I've rea that two images was standard, but I no longer work in the IT industry so I am quite ready to acknowledge others know better than I do :) – Nick Jun 17 '12 at 20:59
I thought this is what I wanted but when I click the button it doesn't do anything. I thought I was doing something wrong so I copied your example exactly and it still didn't work even though it shows working in the fiddle. – Anthony Russo Jun 18 '12 at 00:52
@AnthonyRusso: Can you set up a fiddle with your code? It may help to figure out why yours is not working. – pete Jun 18 '12 at 03:01
@pete I setup a fiddle, ran it with jquery 1.7.2, and it was working with the code I have so I guess my problem is I don't know how to properly input the jquery part into my html code. – Anthony Russo Jun 19 '12 at 00:32
@pete If you have any ideas what I might be doing wrong let me know on here or russoanthony@hotmail.com THANK YOU – Anthony Russo Jun 19 '12 at 01:13
@AnthonyRusso: I realized my answer was not running on `$(document).ready()` which would definitely cause a problem. Updated answer. If this doesn't work, please post a link to your fiddle. – pete Jun 19 '12 at 02:27
@pete It works now. Is there a way to get in contact with you directly if I have any questions or want to pay for you to make me something? – Anthony Russo Jun 19 '12 at 02:38
2

@AnthonyRusso: Glad it works now. If you need anything else, just post it here on SO. We're here to help you. – pete Jun 19 '12 at 02:52

score 0 · Answer 2 · answered Jun 16 '12 at 22:14

In the click handler will simply toggle a class named "active". You will need to write a css rule for .content_toggle.active that adjusts the image the way you want

$("div.content_toggle").click(function () {
      $("div.content").slideToggle("slow");       
      $(this).toggleClass('active');
});

score 0 · Answer 3 · answered Jun 16 '12 at 22:15

since both arrows are in the same image, you will want to set the css background-position attribute:

<script type="text/javascript">
$(function(){

    $("div.content_toggle").data('bgp',0).click(function () {
        $("div.content").slideToggle("slow");
        $(this).data('bgp', 30 - $(this).data('bgp'));  // toggle the stored value
        $(this).css('background-position', '0 '+$(this).data('bgp')+'px'); // set the scss
    });
});
</script>

notice that i'm changing the background-position's y-axis by 30px

better to do it by referncing a CSS class that has the background-position adjusted than doing it like this. — Moin Zaman, Jun 16 '12 at 22:22

score 0 · Answer 4 · answered Jun 16 '12 at 22:35

I would do it with .toggle(). You have more control and the code is more readable, i.e. to see what happens when.

And definitely use one or two classes for the open / closed state.

See example here: http://jsbin.com/anebug/edit#html,live

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
  .content_toggle {
    background: url(toggle-btn.png);
    background-color: rgba(0, 0, 0, 0.9);
    position: absolute;
    cursor: pointer;
    bottom: 62px;
    left: 850px;
    height: 30px;
    width: 30px;
  }
  .content { background-image:url(arrow.png); }
  .closed { background-position:0 -30px; } 
  .open { background-position:0 0; }
</style>
</head>


<body>
<div class="content_toggle" style="display: block;"></div>

<div class="content">content, content, content</div>


<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
<script>
  $("div.content_toggle").toggle(
      function() { $('.content').slideDown('slow',
                                  function(){$(this).removeClass('open')});}, 
      function() { $('.content').slideUp('slow',
                                  function(){$(this).addClass('closed')});
  });
</script>

  </body>
</html>

I agree to using a css class for background position but I tried this and it isn't working. I could be missing something obvious. galchen's demonstration is working for me. — Anthony Russo, Jun 17 '12 at 00:49

How to change / alternate the background-position of an image on slideToggle()?

4 Answers4