Target this function to a particular div

I want to target this function to just the first div With the div id="africa".css:

#africa{width:16%; height: 20%; background-color:#33CC33;}#asia{width:16%; height: 20%; background-color: #FF6600;}#australia{width:16%; height: 20%; background-color: #FF5050;}#europe{width:16%; height: 20%; background-color: #666699;}#north-america{width:16%; height: 20%; background-color: #CC0000;}#south-america{width:16%; height: 20%; background-color: #003300;}.names{width:16%;}

I want to target this section of the code to the first div which has the id "africa".

$(document).ready(function(){$("button").click(function(){    $("div").animate({        height: 'toggle'    });});});

HTML:

<button class="names">Africa</button><div id="africa"></div><button class="names">Asia</button><div id="asia"></div><button class="names">Australia</button><div id="australia"></div><button class="names">Europe</button><div id="europe"></div><button class="names">North-america</button><div id="north-america"></div><button class="names">South-america</button><div id="south-america"></div>