Javascript İle Gizleme/Gösterme

HTML sayfamızdaki herhangi bir alanın gizlenmesi ya da görünür hale gelmesini displayözelliğini kullanarak yapabiliriz.
Alanın gizlenmesi için bu özelliğin değerini display: none şeklinde değiştirmeliyiz.
Gizli bir alanın görünür hale gelmesi için bu özelliğin değerini display: block şeklinde değiştirmeliyiz.

Aşağıdaki örnekte new_artist_region alanı görünmezdir:

<span id="new_artist_region" style="display: none;">
<input name="new_artist" type="text">
</span>


Aşağıdaki örnekte ise new_artist_region alanı görünür durumdadır:

<span id="new_artist_region" style="display: block;">
<input name="new_artist" type="text">
</span>


Aşağıda ise, javascript kullanarak bir alanın nasıl görünür/görünmez hale geldiğini görüyoruz:

<script language="Javascript">
function showhide(area_id){
var area = document.getElementById(area_id);
if (area.style.display == "block") area.style.display = "none";
else if (area.style.display == "none") area.style.display = "block";
}
</script>
<input type="checkbox" name="new_artist" onclick="showhide('new_artist')">New Artist
<span id="new_artist" style="display: none">
<input type="text" name="new_artist">
</span>