Change image source of span, once content area slide happened

I currently have a problem. I built some kind of accordion on a website. Sliding works all fine, however, when I try to write a function to change the image src of the icon it does not work.

I have 3 span6, with the ID's swap1 to swap3. swap1 is visible at beginning, swap 2 and 3 are hidden.

This is my markup, here for swap1 only. swap2 and swap3 are built up the same:

<div id="swap1" class="span6">
     <h3>Lorem Ipsum dolor sit amet?
        <span class="expand"><img src="images/minus.png" /></span>
     </h3>
     <p>Lorem Ipsum dolor sit amet.....</p>
</div>

This is the jQuery:

$(document).ready(function() {
    console.log('logging');
    $('#swap2.span6 p').hide();
    $('#swap3.span6 p').hide();
    $(function() {
        $('#swap1 .expand').click( function() {
             $('#swap1.span6 p').slideToggle();
             $( "#swap1 .expand" ).attr('src', 'images/plus.png').load(function();
        });
        $('#swap2 .expand').click( function() {
             $('#swap2.span6 p').slideToggle();
             $( "#swap1 .expand" ).attr('src', 'images/minus.png').load(function();
        });
        $('#swap3 .expand').click( function() {
             $('#swap3.span6 p').slideToggle();
             $( "#swap1 .expand" ).attr('src', 'images/minus.png').load(function();
        });
     });
 });

First of all, the sliding works, the image src changing not at all. Second, I'm stuck with what happens after you slided. The image would stay at the changed state and would not change back regardless of the state (expanded/collapsed). I'm currently stuck, I tried to look it up how other accordions work, but nothing really helped.

http://jsfiddle.net/K2GpC/2/

Answers


If you don't want to use the jQuery UI accordion the I would suggest you change your jQuery to the following as it will allow for any number of divs rather than just the three you have:

$(function() {
    var divs = $('.span6'),
        content = divs.children('p');

    content.hide();
    content.eq(0).show();

    divs.click(function() {
        var thisContent = $(this).children('p');
        content.not(thisContent).slideUp(500, function() {
            $(this).parent().find('h3 .expand img').attr('src', 'images/plus.png');
        });
        thisContent.slideDown(500, function() {
            $(this).parent().find('h3 .expand img').attr('src', 'images/minus.png');
        });
    });
});

if you have other divs with the class of span6 then you will need give your accordion divs another class name and then use that selector instead

Example


$( "#swap1 .expand" ) is a <span> They do not have src attributes.

Your selector should be :

$( "#swap1 .expand img" ).attr('src', 'images/plus.png')


Check it out. It should be what you want.

$('#swap2.span6 p').hide();
$('#swap3.span6 p').hide();
$('.expand').click(function(){
    var expand = $(this);
    var p = expand.parent().next('p');
    var img = expand.find('img');
    p.slideToggle('normal', function() {
        if (p.is(':hidden')) {
            img.attr('src', 'images/plus.png');
        } else {
            img.attr('src', 'images/minus.png');
        }
    });
});

Need Your Help

TFS keep different copy of file locally

visual-studio-2013 tfs tfs2010 tfvc

I am part of a small team developing a web project in VS2013 with TFS2010 for source control.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.