jQuery accordion - как заменить активную ссылку на изображение вместо этого?

Question

Кто-нибудь знает, как заменить активную ссылку (которая является образом в моем коде) с другим изображением, когда вы нажимаете на нее?

http://jsfiddle.net/8bwre/1/

Я в принципе хочу, чтобы образ «желтого туалетной бумаги» будет заменен на «желтый конверт» при нажатии на значок желтый туалетной бумаги. И то же самое с другим изображением!

Есть ли такое решение?

(function($) { 

    var allPanels = $('.accordion > .day').hide(); 

    $('.accordion > .click > a').click(function() { 
     allPanels.slideUp(); 

     if($(this).parent().next().is(':hidden')) 
     { 
      $(this).parent().next().slideDown(); 
     } 

     return false; 
    }); 

})(jQuery); 

и HTML:

<div class="accordion"> 

    <div class="click"> 
    <a href=""><img src="http://designmodo.github.io/Flat-UI/images/icons/svg/toilet-paper.svg"></a> 
    </div> 

    <div class="day"> 
    <img src="http://designmodo.github.io/Flat-UI/images/icons/svg/mail.svg"> 
    <p>Tomatillo sweet pepper carrot salad cress arugula. Kombu cabbage sorrel celery soko plantain tigernut caulie parsnip tomatillo spinach avocado. Spring onion water chestnut parsnip water spinach cress napa cabbage fennel beetroot.</p> 
    </div> 


    <div class="click"> 
    <a href=""><img src="http://designmodo.github.io/Flat-UI/images/icons/svg/retina.svg"></a> 
    </div> 

    <div class="day"> 
     <img src="http://designmodo.github.io/Flat-UI/images/icons/svg/clocks.svg"><p>Kohlrabi sea lettuce wattle seed mung bean asparagus cucumber chard salsify kombu beetroot radicchio black-eyed pea. Scallion salsify beetroot tigernut prairie turnip artichoke daikon celery turnip greens. Horseradish aubergine carrot gumbo maize collard greens potato caulie lentil arugula salsify rock melon fava bean celery.</p> 
    </div> 

</div> 

Answer 1

Применяя следующий код, который вы можете добиться того, что вы ищете:

http://jsfiddle.net/8bwre/2/

(function($) { 

    var allPanels = $('.accordion > .day').hide(); 

    $('.accordion > .click > a').click(function() { 
     allPanels.slideUp(); 

     /******************/ 
     var currentSrc = $(this).children('img').attr('src'); 

     var newSrc = $(this).parent().next().children('img').attr('src'); 

     $(this).children('img').attr('src', newSrc); 

     $(this).parent().next().children('img').attr('src', currentSrc); 
     /******************/ 


     if($(this).parent().next().is(':hidden')) 
     { 
      $(this).parent().next().slideDown(); 
     } 

     return false; 
    }); 

})(jQuery); 

Тогда в CSS вы можете скрыть второе изображение с помощью display: none;

Answer 2

Все возможно;)

Одно из возможных решений (это до вас, чтобы закодировать его):

1. Есть в вашем DIV . щелкнуть два изображения, одно с классом = «закрыто» другим с классом = «открыто»
2. Используйте CSS по умолчанию скрыть img.open
3. При открытии части использования JS, чтобы скрыть img.closed и показать img.open

Answer 3

Вы бы должны либо скрыть туалетную бумагу или заменить его атрибут источник:

if($(this).parent().next().is(':hidden')) { 
     $(this).hide(); 
     $(this).parent().next().slideDown(); 
    } 

или положить оба изображения в том же

<a href=""> 
    <img src="http://designmodo.github.io/Flat-UI/images/icons/svg/toilet-paper.svg"> 
    <img src="http://designmodo.github.io/Flat-UI/images/icons/svg/mail.svg" style="display: none;"> 
</a> 

и вызовите на функцию переключения(), как показано ниже

$('.accordion > .click > a').click(function() { 
    $(this).children('img').toggle(); 
    $(this).parent().next().slideToggle(); 
    return false; 
});