Last active
August 29, 2015 14:22
-
-
Save chrisdemars/8f2f1f5b7c59ef1c7f37 to your computer and use it in GitHub Desktop.
jQuery hide/show snippet for code challenge
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Hide pizzas | |
$('.pizzas').hide(); | |
// Handle click | |
$('#newyork').click(function() { | |
$(this).next('.pizzas').slideToggle(); | |
}); | |
$('#chicago').click(function() { | |
$(this).next('.pizzas').slideToggle(); | |
}); | |
$('#sanfran').click(function() { | |
$(this).next('.pizzas').slideToggle(); | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Begin Section #2 --> | |
<section class="locations" id="franchises"> | |
<div class="content"> | |
<!-- New York Franchises --> | |
<div class="franchises"> | |
<img id="newyork" src="images/newyork-final.jpg" alt="General 'zza's Pizza Co." title="General 'zza's Pizza Co."> | |
<ul class="pizzas"> | |
<a href="#" data-reveal-id="cheezer"><li><i class="fa fa-cutlery"></i>The Cheezer</li></a> | |
<div id="cheezer" class="reveal-modal"> | |
<h1>The Cheezer</h1> | |
<h2>Ingredients</h2> | |
<ul> | |
<li>Mozzarella</li> | |
<li>Colby</li> | |
<li>Pepper Jack</li> | |
</ul> | |
<a class="close-reveal-modal">×</a> | |
</div> | |
<a href="#" data-reveal-id="jungle"><li><i class="fa fa-cutlery"></i>The Jungle</li></a> | |
<div id="jungle" class="reveal-modal"> | |
<h1>The Jungle</h1> | |
<h2>Ingredients</h2> | |
<ul> | |
<li>Shrooms</li> | |
<li>Onions</li> | |
<li>Tomatoes</li> | |
<li>Basil</li> | |
<li>Yellow Peppers</li> | |
</ul> | |
<a class="close-reveal-modal">×</a> | |
</div> | |
<a href="#" data-reveal-id="ooh-rah"><li><i class="fa fa-cutlery"></i>The Ooh Rah</li></a> | |
<div id="ooh-rah" class="reveal-modal"> | |
<h1>The Ooh Rah</h1> | |
<h2>Ingredients</h2> | |
<ul> | |
<li>Pepperoni</li> | |
<li>Ham</li> | |
<li>Hamburger</li> | |
<li>Bacon</li> | |
<li>Sausage</li> | |
</ul> | |
<a class="close-reveal-modal">×</a> | |
</div> | |
</ul> | |
</div> | |
<!-- Chicago franchises --> | |
<div class="franchises"> | |
<img id="chicago" src="images/chicago-final.jpg" alt="Mozzahella's" title="Mozzahella's"> | |
<ul class="pizzas"> | |
<a href="#" data-reveal-id="cheezerella"><li><i class="fa fa-cutlery"></i>The Cheezerella</li></a> | |
<div id="cheezerella" class="reveal-modal"> | |
<h1>The Cheezerella</h1> | |
<h2>Ingredients</h2> | |
<ul> | |
<li>Mozzarella</li> | |
<li>Mozzarella</li> | |
<li>...More Mozzarella!</li> | |
</ul> | |
<a class="close-reveal-modal">×</a> | |
</div> | |
<a href="#" data-reveal-id="veg-stack"><li><i class="fa fa-cutlery"></i>Veg Stack</li></a> | |
<div id="veg-stack" class="reveal-modal"> | |
<h1>The Veg Stack</h1> | |
<h2>Ingredients</h2> | |
<ul> | |
<li>Shrooms</li> | |
<li>Onions</li> | |
<li>Tomatoes</li> | |
<li>Eggplant</li> | |
<li>Kale</li> | |
</ul> | |
<a class="close-reveal-modal">×</a> | |
</div> | |
<a href="#" data-reveal-id="meaty"><li><i class="fa fa-cutlery"></i>Mount St. Meaty</li></a> | |
<div id="meaty" class="reveal-modal"> | |
<h1>Mount St. Meaty</h1> | |
<h2>Ingredients</h2> | |
<ul> | |
<li>Pepperoni</li> | |
<li>Ham</li> | |
<li>Bacon</li> | |
</ul> | |
<a class="close-reveal-modal">×</a> | |
</div> | |
</ul> | |
</div> | |
<!-- San Francisco Franchises --> | |
<div class="franchises"> | |
<img id="sanfran" src="images/sanfran-final.jpg" alt="The Shroom" title="The Shroom"> | |
<ul class="pizzas"> | |
<a href="#" data-reveal-id="white-pizza"><li><i class="fa fa-cutlery"></i>White Pizza</li></a> | |
<div id="white-pizza" class="reveal-modal"> | |
<h1>White Pizza</h1> | |
<h2>Ingredients</h2> | |
<ul> | |
<li>Mozzarella</li> | |
<li>Alfredo</li> | |
<li>Feta</li> | |
</ul> | |
<a class="close-reveal-modal">×</a> | |
</div> | |
<a href="#" data-reveal-id="veg"><li><i class="fa fa-cutlery"></i>Veg</li></a> | |
<div id="veg" class="reveal-modal"> | |
<h1>Veg</h1> | |
<h2>Ingredients</h2> | |
<ul> | |
<li>Shrooms</li> | |
<li>Onions</li> | |
<li>Tomatoes</li> | |
<li>Eggplant</li> | |
<li>Kale</li> | |
<li>Asparagus</li> | |
</ul> | |
<a class="close-reveal-modal">×</a> | |
</div> | |
<a href="#" data-reveal-id="meat"><li><i class="fa fa-cutlery"></i>Meat</li></a> | |
<div id="meat" class="reveal-modal"> | |
<h1>Meat</h1> | |
<h2>Ingredients</h2> | |
<ul> | |
<li>Pepperoni</li> | |
<li>Ham</li> | |
<li>Sausage</li> | |
<li>Bacon</li> | |
<li>Prosciutto</li> | |
</ul> | |
<a class="close-reveal-modal">×</a> | |
</div> | |
</ul> | |
</div> | |
<h1>Click on your city to view specialty pizzas and toppings!</h1> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment