lundi 31 août 2015

swap image and toggle div onclick

I have a dynamically populated unordered list. Every other list item is hidden. First list item contains an image, when clicked displays the list item immediately following. That part of my code is working fine. What I can't seem to figure out is how to swap the toggle image onclick. Right now the image stays the same

thank you for any help you can provide

$(document).ready(function () {
  $(".slidingDiv").hide();

  $('.show_hide').click(function (e) {
    $(".slidingDiv").slideToggle("slow");
    var val = $(this).src() == "http://ift.tt/1FdgyXH" ? "http://ift.tt/1MYsyCI" : "http://ift.tt/1FdgyXH";
    $(this).hide().src(val).fadeIn("slow");
    e.preventDefault();
  });
});
<script src="http://ift.tt/1qRgvOJ"></script>
<ul id="storeTable">
  <li id="one" class="alwaysVisable">
    <h3>Title</h3>
    <p class="descript">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <img src="http://ift.tt/1MYsyCI" class="show_hide" width="32" height="32">
  </li>
  <li class="slidingDiv">
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.
  </li>
  <li id="two" class="alwaysVisable">
    <h3>Title</h3>
    <p class="descript">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <img src="http://ift.tt/1MYsyCI" class="show_hide" width="32" height="32">
  </li>
  <li class="slidingDiv">
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.
  </li>
</ul>


via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire