I’m after a hand with a bit of JavaScript if possible, I’m working on a collapsible list using jQuery and want to change a background image in a css file dependent on the state of the list

This is the html for the div

<div class="collapse_div">
  <div class="header_div">header text</div>
  <div class="content_div">
     Some text 
  </div>
  <div class="header_div">another header</div>
  <div class="content_div">
    some more text
  </div>
</div>

This is the .css that puts the image (expanded.gif) into the header div

 .collapse_div{
    margin: 0;
    padding: 0;
    width: 500px;
  }

  .header_div {
    margin: 1px;
    color: #000;
    padding: 3px 10px;
    cursor: pointer;
    position: relative;
    background: url(expanded.gif) no-repeat 95%;
    background-color:#ccc;
  }

  .content_div {
    padding: 5px 10px;
    background-color:#fafafa;
  }

And this is the javascript function that controls the expand/collapse when header_div is clicked

    jQuery(document).ready(function() {
      jQuery(".content_div").hide();
      //toggle the ponenet with class msg_body
      jQuery(".header_div").click(function()
      {
        jQuery(this).next(".content_div").slideToggle(500);
      });
    });

I’ve played around with adding code to the .click(function) to try and change the background css tag in .header_div to another file (collapse.gif) but I can’t get it to work, so I thought I’d ask the experts as my javascript is really rusty

At the moment the collapse/expand of the div works fine having the background image change on click would really make it look good

I’m after a hand with a bit of JavaScript if possible, I’m working on a collapsible list using jQuery and want to change a background image in a css file dependent on the state of the list

This is the html for the div

<div class="collapse_div">
  <div class="header_div">header text</div>
  <div class="content_div">
     Some text 
  </div>
  <div class="header_div">another header</div>
  <div class="content_div">
    some more text
  </div>
</div>

This is the .css that puts the image (expanded.gif) into the header div

 .collapse_div{
    margin: 0;
    padding: 0;
    width: 500px;
  }

  .header_div {
    margin: 1px;
    color: #000;
    padding: 3px 10px;
    cursor: pointer;
    position: relative;
    background: url(expanded.gif) no-repeat 95%;
    background-color:#ccc;
  }

  .content_div {
    padding: 5px 10px;
    background-color:#fafafa;
  }

And this is the javascript function that controls the expand/collapse when header_div is clicked

    jQuery(document).ready(function() {
      jQuery(".content_div").hide();
      //toggle the ponenet with class msg_body
      jQuery(".header_div").click(function()
      {
        jQuery(this).next(".content_div").slideToggle(500);
      });
    });

I’ve played around with adding code to the .click(function) to try and change the background css tag in .header_div to another file (collapse.gif) but I can’t get it to work, so I thought I’d ask the experts as my javascript is really rusty

At the moment the collapse/expand of the div works fine having the background image change on click would really make it look good

• javascript
• jquery
• css

Share Improve this question Follow edited Jan 10, 2012 at 20:06 user891380 asked Jan 10, 2012 at 19:23 user891380user891380 22711 gold badge66 silver badges1717 bronze badges 2

• Your jQuery is mentioning a .expand_div that does not appear in your HTML. Can we have a bit more info about it? If the .expand_div you are targeting is really your .header_div, it should not be difficult to find the jquery method to change the background of the "this" object. – TonioElGringo Commented Jan 10, 2012 at 19:28
• Sorry my mistake the jQuery function was an old version as I renamed all the divs to make them easier to understand, have edited the jQuery function to match the html and css .expand_div = .header_div – user891380 Commented Jan 10, 2012 at 20:08

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You can have a class with the requried background set and apply that class conditionally. Try this

CSS

.header_div_collapsed {
    background: url(collapse.gif) no-repeat 95% !important;
  }

JS

jQuery(document).ready(function() {
      jQuery(".content_div").hide();

      //toggle the ponenet with class msg_body
      jQuery(".expand_div").click(function()
      {
           jQuery(this).next(".content_div").slideToggle(500, function(){
               var $this = $(this);
               if($this.is(':visible')){
                  $this.removeClass('header_div_collapsed');
               }
               else{
                  $this.addClass('header_div_collapsed');    
               }
           });
      });
});

Your script should be something like this,

    jQuery(document).ready(function() {
     jQuery(".content_div").hide();
     //toggle the ponenet with class msg_body
     jQuery(".expand_div").click(function()
     { 
        var elm = jQuery( this );
        jQuery(this).next(".content_div").slideToggle(500, function(){
              if(jQuery(this).is(":visible"))
                jQuery(elm).css({"background-image" : "collapse.gif"});
              else 
                jQuery(elm).css({"background-image" : "expand.gif"});
        });
     });
    });

thanks to both the suggestions post below I managed to get this to work

firstly I added a whole new css function as just defining the background didn't work

  .expand_div_collapsed {
    margin: 1px;
    color: #000;
    padding: 3px 10px;
    cursor: pointer;
    position: relative;
    background: url(collapsed.gif) no-repeat 95%;
    background-color:#ccc;
  }

then the JS was changed to this

jQuery(document).ready(function() {
      jQuery(".content_div").hide();

      //toggle the ponenet with class msg_body
      jQuery(".header_div").click(function()
      {
       var co = jQuery(this);
       jQuery(this).next(".content_div").slideToggle(500, function(){

           if(jQuery(this).is(':visible')){
          jQuery(co).addClass('expand_div_collapsed');
           }
           else{
          jQuery(co).removeClass('expand_div_collapsed');
           }
       });
      });
});

the add and remove class calls had to be swapped around and I had to define the var co before the slideToggle call

but thanks to everyone who offered suggestions as I would have never got this to work otherwise