jQuery - my first events

an exercise for learning about jQuery events.

HTML

<h1>Click on the first gray square!</h1>

<p>Then look at the javascript code to find out what happens! Then add your own code!</p>

<div>
    <input type="button" id="left_button" value="show all">
    <input type="button" id="right_button" value="hide all">
</div>
<div class="badge_holder" id="bh1">

<img alt="First Lesson" src="http://cdn.codecademy.com/assets/badges/FirstLessonAchievement-d6f60dce83fd230140606858fa229197.png">

</div>

<div class="badge_holder" id="bh2">
    
<img alt="10 Exercises" src="http://cdn.codecademy.com/assets/badges/Exercises10Achievement-8fe065bfa15675895bf4a12247bb84f4.png">
    
</div>

<div class="badge_holder" id="bh3">
    
<img alt="25 Exercises" src="http://cdn.codecademy.com/assets/badges/Exercises25Achievement-9334fe27052146b42c1c4bbf582739ab.png">
    
    </div>

<div class="badge_holder" id="bh4">
    
<img alt="Getting Stated with Programming" src="http://cdn.codecademy.com/assets/badges/ProgrammingIntroCourseAchievement-d7b0199c9fa4dd92913afaaa82a4a099.png">
    
    </div>

<div class="badge_holder" id="bh5">
    
<img alt="50 Exercises" src="http://cdn.codecademy.com/assets/badges/Exercises50Achievement-fde588c9e7f0e215198ab3edbb5ad927.png">
    
    </div>

<div class="badge_holder" id="bh6">
    
<img alt="Functions in JavaScripts" src="http://cdn.codecademy.com/assets/badges/FunctionsInJavaScriptCourseAchievement-fc55dfb887fffacf3a62d72e6d5268a6.png">
    

    
</div>

CSS

.badge_holder {
    float: left; 
    width: 114px;
    height: 114px;
    background-color: #ddd;
    margin: 10px;
    padding: 10px;
}

JavaScript

/* this happens when the page is loaded: */

$('img').slideUp();


/* the first way to handle an event: write a function, use it */

/* this function is used later on, when #bh1 is clicked */

function show_1() {
    $('#bh1 img').slideDown();
}

$('#bh1').on('click', show_1 );



/* the second way to handle an event: use an anonymous function */


$('#bh2').on('click', function() {
    $('#bh2 img').slideDown();
});



/* try it out for yourself!  make the rest of the squares clickable! */