JS показать остальные фотографии

[irkmos]

Имеется скрипт,работающий следующим образом:
При заходе на страницу показывается первая фотография из пяти имеющихся. При нажатии на ссылку: Показать остальные фото,подгружаются оставшиеся 4 фотографии.
<script>
function toggle(toggler) {
var targetStyle = document.getElementById(toggler.getAttribute("data-target")).style;
targetStyle.display = targetStyle.display == "none" ? "block" : "none";
toggler.className = toggler.className == "up" ? "down" : "up";
}
</script>
<p>Фото1</p>
<a href="#foto" class="up" onclick="toggle(this); return false;" data-target="foto">Показать остальные фото</a>
<div id="foto" style="display:none;">
<p>Фото2</p>
<p>Фото3</p>
<p>Фото4</p>
<p>Фото5</p>
</div>
Подскажите как сделать, что бы при нажатии на эту самую ссылку,она исчезала. Т.е. когда ее нажали: фотки подгрузились,а самой ссылки не становилось.

 

[diavolic]

<script>
function toggle(toggler) {
var targetStyle = document.getElementById(toggler.getAttribute("data-target")).style;
var ssylkaStyle = document.getElementById("ssylka").style;
targetStyle.display = targetStyle.display == "none" ? "block" : "none";
toggler.className = toggler.className == "up" ? "down" : "up";
ssylkaStyle.display = ssylkatStyle.display == "none" ? "block" : "none";
}
</script>
<p>Фото1</p>
<div id="ssylka" style="display:block;">
<a href="#foto" class="up" onclick="toggle(this); return false;" data-target="foto">Показать остальные фото</a>
</div>
<div id="foto" style="display:none;">
<p>Фото2</p>
<p>Фото3</p>
<p>Фото4</p>
<p>Фото5</p>
</div>

 

[irkmos]

Попробовал,ничего не изменилось,ссылка остается.