Javascript jQuery显示/隐藏文本按钮onclik或平滑隐藏

我想确定哪种方法是最好的，我的代码是否有效且良好。

我没有成功重命名文本“隐藏联系人”/“显示联系人”，以查看结果

.style.display='none'对我来说似乎有点太残酷了

我选择了“隐藏按钮”版本
但是如果你知道如何重新命名这个按钮，那将是一个额外的收获

我在手机（chrome）上也有冲动，我不明白为什么。滑动切换不是到处都是平滑的


方法1：不工作

/* Show/hide rename button text  */ 
jQuery(document).on('click', '#TEST_BTN', function(event) {
     event.preventDefault();
    $(document).ready(function(){
        $("TEST_BTN").click(function(){
            if ($(this).text() == 'show contact'){
                $(this).html('hide contact;')
            }else{
                $(this).html('show contact');
            }
      jQuery('#hidden-content').slideToggle('250','swing','hide');
     });    

/* Hide show contact button */      
document.addEventListener("DOMContentLoaded", function(event) {
  jQuery('#TEST_BTN').click(function(){
  event.preventDefault();
    document.getElementById("TEST_BTN").style.display = 'none';
      jQuery( '#hidden-content' ).slideToggle('250','swing','hide');
  });
}); 

方法2：工作

/* Show/hide rename button text  */ 
jQuery(document).on('click', '#TEST_BTN', function(event) {
     event.preventDefault();
    $(document).ready(function(){
        $("TEST_BTN").click(function(){
            if ($(this).text() == 'show contact'){
                $(this).html('hide contact;')
            }else{
                $(this).html('show contact');
            }
      jQuery('#hidden-content').slideToggle('250','swing','hide');
     });    

/* Hide show contact button */      
document.addEventListener("DOMContentLoaded", function(event) {
  jQuery('#TEST_BTN').click(function(){
  event.preventDefault();
    document.getElementById("TEST_BTN").style.display = 'none';
      jQuery( '#hidden-content' ).slideToggle('250','swing','hide');
  });
}); 

嗯，在同一元素内单击？！它不会像这样工作，它会在每次单击元素时添加另一个单击事件，这是在单击一些元素后得到的结果


var i=0；
$（'button'）。在（'click'，function（）上{
$（“按钮”）。单击（函数（）{
console.log（i++）；
});
});

在单击内部单击不应$（“TEST_BTN”）。单击（function（）{be$（“#TEST_BTN”）。在方法1中单击（function（）{？