Question

I am having an issue combining two functions that work independently correctly, was hoping to gain some insight. I know this has todo with the id/class declarations, I am just not sure how to effectively accomplish showing/hiding a div and having the image function incorporated
my toggle is as follows: (in the doc ready)

  $('.acc_container #info').hide();

  $('.acc_container #showInfo').click(function(){
  $(this).toggleClass("active").next().slideToggle("slow"); 
    return false; //Prevent the browser jump to the link anchor
   });

my image expand collapse function: (in the doc ready)

 $('.acc_container #showInfo img').live('click', function () {
    if ( this.src.match('details_close') )
    {

        this.src = "..images/details_open.png";
    }
    else
    {

        this.src = "../images/details_close.png";
    }               
 });     

the html is as follows

 <div id='showInfo'>
  <img src="../images/details_open.png" /> 
  <p>Expand Specific info</p> 
 </div>    
 <div id='info'>
  <p>revealed</p>
 </div>

any assistance is greatly appreciated!

EDIT

end result of what i want to accomplish in imagery

prior to clicking the #showInfo div

expand http://desmond.imageshack.us/Himg834/scaled.php?server=834&filename=expand.gif&res=medium

after clicking the #showInfo div

collapse http://desmond.imageshack.us/Himg12/scaled.php?server=12&filename=collapsezh.gif&res=medium

So the #info div shows and hides onclick, and the image toggles on/off to give the client expand collapse look

Answer 1

This seemed to be the only thing that worked, i had todo the image first then the toggle of div

 $('.acc_container #info').hide();
 $('.acc_container #showInfo img').live('click', function () {

 if ( this.src.match('details_close') )
 {      
  this.src = "../images/details_open.png";
  $('.acc_container #showInfo').toggleClass("active").next().slideToggle("slow");
 }
 else
 {      
  this.src = "../images/details_close.png";
  $('.acc_container #showInfo').toggleClass("active", false).next().slideToggle("slow");
 }          
 return false; //Prevent the browser jump to the link anchor
}); 

Im sure theres a more elegant way of doing this, but this method does work