I'm attempting to utilize a single href link to toggle the visibility of two other divs. The first div should be visible by default, while the second div remains hidden.
<a href="#ben1" class="fa fa fa-times closer" >
<p> clickable text </p>
</a>
<a href="#ben2" class="fa fa fa-times closer" >
<p> clickable text</p>
</a>
<div class="resume right-col" id="ben1">
<p>Hello this is a test </p>
</div>
<div class="resume right-col" id="ben2">
<p>Hello this is a test </p>
</div>
<div class="resume right-col" id="ben1">
<p>second text area i need displayed by default</p>
</div>
<div class="resume right-col" id="ben2">
<p>second text area i need hidden initially/p>
</div>
<script>
$('.resume') .hide()
$('#ben1').show();
$('a[href^="#"]').on('click', function(event) {
$('.resume') .hide()
var target = $(this).attr('href');
$('.resume'+target).toggle();
e.preventDefault();
});
</script>
Upon initial loading of the page, the second div identified with "ben1" always remains hidden. Is there something missing from the script that I need to incorporate?