Skip to content

Instantly share code, notes, and snippets.

@zenideas
Last active December 17, 2015 18:58
Show Gist options
  • Save zenideas/5656664 to your computer and use it in GitHub Desktop.
Save zenideas/5656664 to your computer and use it in GitHub Desktop.
http://try.jquery.com/levels/4/challenges/19 When this link is clicked, show the photos for the clicked tour by traversing to it using closest and find then sliding it down by using slideToggle.
<div id="all-tours" class="links">
<h1>Guided Tours</h1>
<ul>
<li class="tour usa" data-discount="199">
<h2>New York, New York</h2>
<span class="details">$1,899 for 7 nights</span>
<button class="book">Book Now</button>
<a href="#" class="see-photos">See Photos</a>
<ul class="photos">
<li>
<img src="/assets/photos/paris1.jpg">
<span>Arc de Triomphe</span>
</li>
<li>
<img src="/assets/photos/paris2.jpg">
<span>The Eiffel Tower</span>
</li>
<li>
<img src="/assets/photos/paris3.jpg">
<span>Notre Dame de Paris</span>
</li>
</ul>
</li>
<li class="tour france" data-discount="99">
<h2>Paris, France</h2>
<span class="details">$1,499 for 5 nights</span>
<button class="book">Book Now</button>
<a href="#" class="see-photos">See Photos</a>
<ul class="photos">
<li>
<img src="/assets/photos/paris1.jpg">
<span>Arc de Triomphe</span>
</li>
<li>
<img src="/assets/photos/paris2.jpg">
<span>The Eiffel Tower</span>
</li>
<li>
<img src="/assets/photos/paris3.jpg">
<span>Notre Dame de Paris</span>
</li>
</ul>
</li>
<li class="tour uk" data-discount="149">
<h2>London, UK</h2>
<span class="details">$2,199 for 5 nights</span>
<button class="book">Book Now</button>
<a href="#" class="see-photos">See Photos</a>
<ul class="photos">
<li>
<img src="/assets/photos/paris1.jpg">
<span>Arc de Triomphe</span>
</li>
<li>
<img src="/assets/photos/paris2.jpg">
<span>The Eiffel Tower</span>
</li>
<li>
<img src="/assets/photos/paris3.jpg">
<span>Notre Dame de Paris</span>
</li>
</ul>
</li>
</ul>
</div>
$(document).ready(function() {
$(".see-photos").on("click", function() {
$(this).closest('.tour').find('.photos').slideToggle()
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment