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.
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
Comments
Post a Comment