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

Question

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" class="hide">+ Content</a>
<a id="show1" href="#show1" class="show">- Content</a>
<div class="details">
<ul>
<li>Content1</li>
<li>Content2</li>
</ul>
</div>

Answer 1

.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" class="hide"></label>
<div class="details">
<ul>
<li>Content1</li>
<li>Content2</li>
</ul>
</div>

Answer 2

Anchor tags reload the pages and thus the main div is collapsing.
You can either use this.
<li>Content1</li>
<li>Content2</li>
Or if you still want to use href then return false on click which will prevent it from reloading the page.
<li>Content1</li>
<li>Content2</li>

Answer 3

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 class="details">
<ul>
<li>Content1</li>
<li>Content2</li>
</ul>
</div>