你可以使用Element#classList来打开和关闭一个类：

var p = document.getElementById("p"); // get a reference to p and cache it

function show() {
  p.classList.toggle('hideP'); // toggle the hideP class
}

document.getElementById('button').addEventListener('click', show); // add an event listener to the button

.hideP {
  visibility: hidden;
}

<button id="button">Click me</button>

<p id="p" class="hideP">hi</p>

以下是非JS方法，使用隐藏的复选框来存储状态：

input:checked + #text { display: none; }

<label for="check">Press me</label>

<input id="check" type="checkbox" style="display: none; ">

<p id="text">This is some text.</p>

您可以测试CSS属性，并在第一次检查完成后设置一个var。

var $test;
function show() {
  if ((document.getElementById("p").style.visibility = "hidden") | ($test!="visible"))
  {document.getElementById("p").style.visibility = "visible";
  $test="visible"
  }
  else  
  {document.getElementById("p").style.visibility = "hidden";
  $test="hidden"}
}

#p {
  visibility: hidden;
}

<button onclick="show() ">Click me</button>

    <p id="p">hi</p>

基于user663031的回答，这里是我的通用CSS唯一解决方案，可以在页面中多次使用：

/* hide the input field */
.toggle-section > input.toggle-control { 
display: none; 
}
/* start with hidden collapsed icon */
.toggle-section > label .toggle-icon-expanded { 
display: none; 
}
/* display expanded icon */
.toggle-section > input.toggle-control:checked ~ label > .toggle-icon-expanded { 
display: inline; 
}
/* hide collapsed icon */
.toggle-section > input.toggle-control:checked ~ label > .toggle-icon-collapsed { 
display: none; 
}
.toggle-section .toggle-text * { 
display:inline; vertical-align:top 
}
/* start with hidden contents */
.toggle-section > .toggle-contents { 
display: none; 
}
/* display contents when expanded */
.toggle-section > input.toggle-control:checked ~ .toggle-contents { 
display: block; 
}

<div id="example-1" class="toggle-section">
<input id="example-1-check" class="toggle-control" type="checkbox">
<label for="example-1-check"><span class="toggle-icon-collapsed">&gt; </span><span class="toggle-icon-expanded">v </span><span class="toggle-text">More details here</span></label>
  <div class="toggle-contents">

    <p>This is some text.</p>
  </div>
</div>


<div id="example-2" class="toggle-section">
<input id="example-2-check" class="toggle-control" type="checkbox">
<label for="example-2-check"><span class="toggle-icon-collapsed">&gt; </span><span class="toggle-icon-expanded">v </span><span class="toggle-text">Other details here</span></label>
  <div class="toggle-contents">

    <p>This is another text.</p>
  </div>
</div>