i have a div that is hidden by default when i click on the link then the div is shown. for e.g

<a href=#expe1 class=fa fa fa-times closer ></a> //this is the link

<div class=resume id=expe1></div> // this div is hidden by default

here is the jquery part

jQuery(document).ready(function($) {

$('a[href^=#]').on('click', function(event) {



    var target = $( $(this).attr('href') );



    target.show();

    if( target.length ) {

        event.preventDefault();

        $('html, body').animate({

            scrollTop: target.offset().top

        }, 2000);

    }



});

});

Now i want to hide that div which i showed
So i created another link in front of that div

<div class=resume id=expe1></div><a href=#expe1>x</a>

and here is jquery code

jQuery(document).ready(function($) {

$('a[href^=#]').on('click', function(event) {



    var target = $( $(this).attr('href') );

    target.hide();

    });

});

but this doesn't works as first jquery shown above is processed first then the last one.. is there any better way to hide that div becuase i have many div like this