HTML,CSS How do i prevent the expand/show from hiding/collapsing-CodePudding

hello how do i prevent the content from collapsing/hiding when i click on Content 1 or 2

.details,
.show,
.hide:target {
  display: none;
  color: black;
}

.hide:target .show,
.hide:target~.details {
  display: block;
  color: black;
}

<a id="hide1" href="#hide1" >  Content</a>
<a id="show1" href="#show1" >- Content</a>
<div >
  <ul>
    <li><a href="#Content1">Content1</a></li>
    <li><a href="#Content2">Content2</a></li>
  </ul>
</div>

CodePudding user response：

.hide {
  cursor: pointer;
}
.hide::before {
  content: '  Content';
  display: block;
}

.hide::after {
  content: '- Content';
  display: none;
}

.details  {
  display: none;
  transition:all 0.4s linear;
}

input:checked ~ .details,
input:checked   .hide::after {
  display: block;
}

input:checked   .hide::before {
  display: none;
}

<input id="toggle" type="checkbox" style="visibility:hidden">
<label for="toggle" ></label>
<div >
  <ul>
    <li><a href="#Content1">Content1</a></li>
    <li><a href="#Content2">Content2</a></li>
  </ul>
</div>

CodePudding user response：

Anchor tags reload the pages and thus the main div is collapsing. You can either use this.

<li><a href="javascript:void(0)">Content1</a></li>
<li><a href="javascript:void(0)">Content2</a></li>

Or if you still want to use href then return false on click which will prevent it from reloading the page.

<li><a href="#Content1" onclick="return false;">Content1</a></li>
<li><a href="#Content2" onclick="return false;">Content2</a></li>

CodePudding user response：

The problem with target is that it disappears from the content /- when the user clicks on something else.

To remember whether the content or - has been clicked you can use a checkbox.

If you make the /- content into labels instead of divs then they can be associated with the checkbox (using for=) and you can hide the actual checkbox.

#showhide {
  position: absolute;
  opacity: 0;
}

#showhide~#show {
  display: block;
}

#showhide:checked~#show {
  display: none;
}

#showhide~#hide {
  display: none;
}

#showhide:checked~#hide {
  display: block;
}

#showhide~.details {
  display: none;
}

#showhide:checked~.details {
  display: block;
}

<input id="showhide" type="checkbox">
<label for="showhide" id="show">  Content</label>
<label for="showhide" id="hide">- Content</label>
<div >
  <ul>
    <li><a href="#Content1">Content1</a></li>
    <li><a href="#Content2">Content2</a></li>
  </ul>
</div>