Question

My code is working great for the slideToggle function, but the more/less images are not swapping. When previewing locally in browser the image remains as “more.” The uploaded version behaves somewhat differently. In Safari it swaps to a blank image, In FF it uses the alt text.

I’ve looked in the archives and found similar discussions, but since my code is working correctly except this little flaw I’m hoping not to have to use a different approach since I’m new to jQuery. This must be something very simple. I figured as simple as the second image being incorrectly named, but that’s not the issue.

Here is a link http://mentalwarddesign.net/Andrea/Leather/leather.html

Here is the script itself:

<script src="../js-jquery/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function(e) {
   $('.changeTextButton').click( function() {
       $('.moreText').slideToggle(500)
       if ( $(this).attr('src') == 'img/more-button.png' ) {
                $(this).attr('src','img/less-button.png')
       }
       else {
           $(this).attr('src','img/more-button.png')
       }
   })
});
</script>

Here is the specific CSS:

.contentTop {
    width: 540px;
    padding-left: 10px;
    margin-bottom: 20px;
}
.firstText {
    width: 540px;
    padding-left: 10px;
}
.moreText  {
    width: 540px;
    padding-left: 10px;
    display: none;
}
.changeTextButton  {
    display: block;
    cursor: pointer;
    float: right;
    margin-right: 10px;
    margin-top: -18px;
}

And here is the pertinent html:

    <div class="content">
    <div class="firstText">
        <h1><img src="imgLeather/leatherSm.jpg" width="280" height="190" alt="leather" style="float:right;margin:5px 0 0 10px;">Leather Scents</h1>
        <p>After working for several years with different tanneries, Andrea Aromatics has developed what many in our industry acknowledge to be the best leather scents on the market today.  Due to newer tanning methods, some leathers produced today no longer have the desired “traditional” scent.  Another problem is that protective coatings used on some leathers actually impede the natural leather aroma from migrating through the surface.  These polymeric coatings make the leather smell more like plastic.</p>
        <p>Our leather scents have been used by tanneries to increase and enhance the aroma of their quality leathers, as well as by manufacturers of synthetic leather products to make their product simulate the real thing.  We offer leather scents in a variety of forms: liquid, powdered, and pelletized.</p>
      <!-- end .firstText--></div>
    <div class="moreText">
        <p>Natural leather hides can be deodorized and their aroma enhanced by several application methods:</p>
        <ol>
          <li>A water dispersible version of our leather scent can be incorporated into the final bath water to impart scent to the entire hide.</li>
          <li>A concentrated oil soluble version can be mixed into the finishing oil and applied along with it.</li>
          <li>A version can be diluted with alcohol and sprayed onto the “reverse” side.</li>
        </ol>
        <p>We do not recommend mixing the leather scents with proactive leather coatings since they may react and cause discoloration.  A slight yellowing may develop which would be objectionable in “white” or “pale blue” finished leather.  Darker colors and shades are usually not affected.</p>
        <p>We have been supplying our leather scents to the industry for over twenty years.  In that time our scents have been used in both natural and artificial leathers used by several major manufacturers both domestically and abroad.  They have also been used in scented advertising, consumer leather goods, furniture upholstery, toys and sporting goods.</p>
     </div><!-- end .moreText -->
       <img src="../imgGlobal/more-button.png" width="51" height="16" class="changeTextButton" alt="textButton">
      </div><!-- end .content -->

Any help in pointing me to the culprit is much appreciated!

Answer 1

Your code is perfect as far as i can tell.

Your problem is, as you might be happy to hear, just that the image does no exist on your server.

img/less-button.png 

Upload the file or change it to the correct path in your JS

$(this).attr('src','WHEREAMI__img/less-button.png')