Inline css wont toggle, no javascript-CodePudding

I am trying to achieve toggle of div using just inline css but its not working. please note that inline css is required no javascript. Thanks guys.

</head>

<body>

  <div>
    <a id="hide1" href="#hide1" >  Expand</a>
    <a id="show1" href="#show1"  style="display: none;">- Expand</a>
    <div  style="display: none;">
      Content goes here.
    </div>

  </div>

</body>

</html>

CodePudding user response：

Use the summary / details HTML elements.

<details>
    <summary>Expand</summary>
    Content goes here.
</details>

CodePudding user response：

Use a checkbox instead.

input:not(:checked)   .toggle {
  display: none;
}

<span>Show</span><input type="checkbox" />
<div >Hello World!</div>