jQuery Events - with badges

this could be an exercise for learning about jQuery events.

by bjelline

HTML

<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

function show_all() {
    $('img').slideDown();
}

function hide_all() {
    $('img').slideUp();
}

hide_all();


$('#left_button').click( show_all );
$('#right_button').click( hide_all );


function toggle_one() {
    $(this).find('img').slideToggle();
}

$('.badge_holder').click( toggle_one );