Jquery Toggle with Images

      
       <style>
       .trigger{
           height:25px; width:100%;
           padding-top:7px; color:#3842b4; font-weight:bold; padding-left:5px;
       
           background:url(down.png) no-repeat center right
      
       }
      
      
      .active{
           height:25px; width:100%;
      
           background:url(up.png) no-repeat center right
      
       }
      
       .toggle_container{}
      
       .icon_col{ background:url("collapse.jpg"); width:13px; height:13px}
       .icon_exp{ background:url("expand.jpg"); width:13px; height:13px}
      
       </style>  
              
              
  <script type="text/javascript">
      $(document).ready(function() {

          $(".toggle_container").hide();

 

          $(".trigger").toggle(function() {
              $(this).addClass("active");
          }, function() {
              $(this).removeClass("active");
          });

 

          $(".trigger").click(function() {
          $(this).next(".toggle_container").slideToggle("slow,");

             
          });

 

 

 

      });
</script>
       
              

 

 

 

<div style=" background-color:#d7e5f7; padding-right:10px;">
 
  <div  class="trigger">title
 </div>

  <div class="toggle_container"  > 

content  </div> 

 

 

<div  class="trigger">title2
 </div>

  <div class="toggle_container"  > 

content2  </div> 

 

 

 

<div  class="trigger">title3
 </div>

  <div class="toggle_container"  > content3

  </div> 

 

</div>