如何在单击第二个按钮时隐藏内容

Question

我能够创建一个 greasemonkey 脚本，它显示一个按钮，单击时会出现一个表格。但是，我想让表格消失然后第二次点击按钮。 有谁知道那是如何工作的？

那是我的原始代码：

// ==UserScript==
// @name        _TEST
// @description Adds live example button, with styling.
// @include  https://www.google.com/*
// @grant       GM_addStyle
// ==/UserScript==


var zNode       = document.createElement ('div');
zNode.innerHTML = '<button id="myButton" type="button">'
                + 'Show DE MIDs</button>'
                ;
zNode.setAttribute ('id', 'myContainer');
document.body.appendChild (zNode);

/* --- activate button */
document.getElementById ("myButton").addEventListener (
    "click", ButtonClickAction, false
);



function ButtonClickAction (zEvent) {
    /*--- add text when clicked */
    var zNode       = document.createElement ('p');
    zNode.innerHTML =  `
    <div id="gmSomeID">
<p> IDs added by Greasemonkey</p>
        <table>
  <tr>
    <th>Country</th>
    <th>ID</th>
  
  </tr>
  <tr>
    <td>DE</td>
    <td>123456</td>
 
  </tr>
  <tr>
    <td>IT</td>
    <td>XXXXXX</td>
  </tr>
  </tr>
</table> 
    </div>
`;
    document.getElementById ("myContainer").appendChild (zNode);
}

//--- Style our newly added elements using CSS.
GM_addStyle ( `
    #myContainer {
        position:               absolute;
        top:                    0;
        left:                   10;
        font-size:              200px;
        background:             orange;
        border:                 3px outset black;
        margin:                 5px;
        opacity:                0.9;
        z-index:                1100;
        padding:                5px 20px;
    }
    #myButton {
        cursor:                 pointer;
    }
    #myContainer p {
        color:                  red;
        background:             white;
    }
` );

我的尝试是使用 HideRanks，但这并没有改变任何东西。

// ==UserScript==
// @name        _TEST
// @description Adds live example button, with styling.
// @include  https://www.google.com/*
// @grant       GM_addStyle
// ==/UserScript==


var zNode       = document.createElement ('div');
zNode.innerHTML = '<button id="myButton" type="button">'
                + 'Show DE MIDs</button>'
                ;
zNode.setAttribute ('id', 'myContainer');
document.body.appendChild (zNode);

/* --- activate button */
document.getElementById ("myButton").addEventListener (
    "click", ButtonClickAction, false
);


function HideRanks (zEvent) {
    document.getElementById("UserList").classList.toggle('ButtonClickAction');
}
function ButtonClickAction (zEvent) {
    /*--- add text when clicked */
    var zNode       = document.createElement ('p');
    zNode.innerHTML =  `
    <div id="gmSomeID" onclick="HideRanks()">
<p> IDs added by Greasemonkey</p>
        <table>
  <tr>
    <th>Country</th>
    <th>ID</th>
  
  </tr>
  <tr>
    <td>DE</td>
    <td>123456</td>
 
  </tr>
  <tr>
    <td>IT</td>
    <td>XXXXXX</td>
  </tr>
  </tr>
</table> 
    </div>
`;
    document.getElementById ("myContainer").appendChild (zNode);
}

//--- Style our newly added elements using CSS.
GM_addStyle ( `
    #myContainer {
        position:               absolute;
        top:                    0;
        left:                   10;
        font-size:              200px;
        background:             orange;
        border:                 3px outset black;
        margin:                 5px;
        opacity:                0.9;
        z-index:                1100;
        padding:                5px 20px;
    }
    #myButton {
        cursor:                 pointer;
    }
    #myContainer p {
        color:                  red;
        background:             white;
    }
` );