javascript - Change image source of span, once content area slide happened -


i have problem. built kind of accordion on website. sliding works fine, however, when try write function change image src of icon not work.

i have 3 span6, id's swap1 swap3. swap1 visible @ beginning, swap 2 , 3 hidden.

this markup, here swap1 only. swap2 , swap3 built 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 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, sliding works, image src changing not @ all. second, i'm stuck happens after slided. image stay @ changed state , not change regardless of state (expanded/collapsed). i'm stuck, tried how other accordions work, nothing helped.

http://jsfiddle.net/k2gpc/2/

if don't want use jquery ui accordion suggest change jquery following allow number of divs rather 3 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 have other divs class of span6 need give accordion divs class name , use selector instead

example


Comments

Popular posts from this blog

image - ClassNotFoundException when add a prebuilt apk into system.img in android -

I need to import mysql 5.1 to 5.5? -

Java, Hibernate, MySQL - store UTC date-time -