Need help adding code to "show more" function

[IntegrityWebDev]

Hello all, I'm relatively new to Webmaster World and to Javascript/JQuery, hoping you can help.

I needed a div that shows a snippet of content with a MORE link and when you expended it, shows a LESS link too. I have that working (code below). What I want to add is an image graphic for each instance. For SHOW MORE I have a down arrow, for SHOW LESS I have an up arrow. I'm just not sure how to implement this in the given Javascript.

Here is the code (using JQuery):

 <script type="text/javascript" src="code/scripts/jquery.js"></script> 
 <script type="text/javascript"> 
 /*<![CDATA[*/
  $(function() {
   $(".inner2").hide();
 
   $(".show").toggle(function(){
    $(this).parents("div").prev(".inner2").show('slow');
    $(this).text("less");
    $(this).attr("title", "View Less");
   },function(){
    $(this).parents("div").prev(".inner2").hide();
    $(this).text("more");
    $(this).attr("title", "View More");
   });
  });
 /*]]>*/
 </script> 

And here are the DIV's...you can see on the initial VIEW MORE I have the graphic in place:

<div class="inner1">Click here for more information...</div> 
<div class="inner2">...more info goes in here.</div> 
<div align="right" class="view-more-link"><a href="" title="View More" class="show">more <img src="images/misc/arrow_more.jpg" alt="View More" width="14" height="7" border="0" /></a></div>

Any help would be appreciated...thanks guys! -Chris

[Fotiman]

There is another thread that I just posted to:
[webmasterworld.com...]

In it, I demonstrate creating a link for showing/hiding content. Basically, think about what your users who have JavaScript disabled will see. They will see a div that tells them to click on it for more information, followed by more information. A better solution is to only provide the "button" (link, div, control, whatever) if the user is capable of using it. In other words, use JavaScript to generate the element if it is not truly part of your content.

Note, my example in that other thread does not use any frameworks, just plain old DOM methods, but it could easily be modified to work with jQuery.

I hope that's helpful.

[IntegrityWebDev]

Thanks Fotiman...I checked it out and it makes sense, especially the part about the floating MORE button if they have JS disabled. i couldn't get your example to work but its simply because it didn't paste correctly over from this site to dreamweaver.

For the sake of completeness I will post that I found an answer that swaps out a background image, but I like your method better and will seek to implement that...here is the version I have.

#1 Set the CSS

.view-more-link {
background-image: url(images/misc/arrow_more.jpg);
background-repeat: no-repeat;
background-position: right center;
}

#2 Update the HTML

 <div align="right" class="view-more-link" id="changeback"> 
  <a href="" title="View More" class="show" onclick="changeDivImage()">more</a>
 </div>

#3 Update the JS

 /*<![CDATA[*/
  $(function() {
   $(".inner2").hide();
 
   $(".show").toggle(function(){
    $(this).parents("div").prev(".inner2").show('slow');
    $(this).text("less");
    $(this).attr("title", "View Less");
   },function(){
    $(this).parents("div").prev(".inner2").hide();
    $(this).text("more");
    $(this).attr("title", "View More");
   });
  });
 /*]]>*/
function changeDivImage()
 {
  var imgPath = new String();
  imgPath = document.getElementById("changeback").style.backgroundImage;
  
  if(imgPath == "url(images/misc/arrow_more.jpg)" ¦¦ imgPath == "")
  {
   document.getElementById("changeback").style.backgroundImage = "url(images/misc/arrow_less.jpg)";
  }
  else
  {
   document.getElementById("changeback").style.backgroundImage = "url(images/misc/arrow_more.jpg)";
  }
 }

THanks again!
Chris