I am trying to figure out how to modify a specific child element within an HTML structure. Specifically, I want to target the first anchor tag within a list item of an unordered list. Here is what I have attempted so far:
[HTML AND JQUERY]
<body>
<ul id="nav">
<a href="#"><li>1</li></a>
<a href="#"><li>2</li></a>
<a href="#"><li>3</li></a>
<a href="#"><li>4</li></a>
<a href="#"><li>5</li></a>
<a href="#"><li>6</li></a>
<a href="#"><li>7</li></a>
<a href="#"><li>8</li></a>
</ul>
<div id="hidden">
<h1>Text</h1>
<img src="#">
</div>
<script>
var main = function() {
var el1H1 = "Text";
var el1P = "Some text again.";
$('ul').children('a:first-child').click(function() {
$('#hidden').slideDown(1000);
});
};
$(document).ready(main);
</script>