Как скрыть и показать div onclick ссылки

Question

У меня есть div, который скрыт по умолчанию, когда я нажимаю на ссылку, тогда отображается div. для например

<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 

здесь является JQuery часть

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); 
    } 

}); 
}); 

Теперь я хочу, чтобы скрыть, что DIV, который я показал Так я создал еще одну ссылку перед этим DIV

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

и здесь код jquery

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

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

, но это не работает как первый JQuery показано выше, обрабатывается первым, то последний один .. есть ли лучший способ, чтобы скрыть, что DIV потому что я много DIV как этот

Answer 1

Codepen Demo

<a href="#expe1" class="fa fa fa-times closer" >Link1</a> 
<div class="resume" id="expe1">Open Block 1</div> 

<a href="#expe2" class="fa fa fa-times closer" >Link2</a> 
<div class="resume" id="expe2">Open Block 2</div> 

<a href="#expe3" class="fa fa fa-times closer" >Link3</a> 
<div class="resume" id="expe3">Open Block 3</div> 

JS:

$('.resume') .hide() 
$('a[href^="#"]').on('click', function(event) { 
$('.resume') .hide() 
    var target = $(this).attr('href'); 

    $('.resume'+target).toggle(); 

}); 

Answer 2

вы можете использовать fadeToggle(); или slideToggle();

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

 
    var target = $($(this).attr('href')); 
 
    target.fadeToggle(100); 
 
    /*if(target.length) { 
 
     event.preventDefault(); 
 
     $('html, body').animate({ 
 
      scrollTop: target.offset().top 
 
     }, 2000); 
 
    }*/ 
 

 
}); 
 
});

.resume{ 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#expe1" class="fa fa fa-times closer" >Click</a> 
 
<div class="resume" id="expe1">Something Here</div>

Answer 3

Пожалуйста, смотрите пример кода ниже

<span href="#" id="showItem">Show Div</span> 
<span href="#" id="hideItem">Hide div</span> 
<div id="item">to be covered</div> 

    <script type="text/javascript" src="js/jquery-2.2.0.min.js"></script> 
    <script type="text/javascript"> 
     var divToHide = $('div#item'); 
     var hideBtn = $('span#hideItem'); 
     var showBtn = $('span#showItem'); 

     showBtn.click(function() { 
      divToHide.show(); 
     }); 

     hideBtn.click(function() { 
      divToHide.hide(); 
     }); 

     $(document).ready(function() { 
      //alert(); 
      divToHide.hide(); 
     }); 
    </script>