Hide/show a div

[lurtnowski]

I have

						<div class="row">
							<div class="col">
							  <a id="hide" href="#hide" class="float-end"><span class="icon-chevron-down"></span> Show more</a>
							  <a id="show" href="#/" class="float-end"><span class="icon-chevron-up"></span> Show less</a>
							</div>								
						</div>
					    <div id="answer" class="row">

...
</div>

and heres the CSS

#answer,
#show,
#hide:target {
    display: none; 
}

#hide:target + #show,
#hide:target ~ #answer {
    display: inherit; 
}

Pure CSS collapse/expand div

what am I missing?

[sibertius]

@lurtnowski

what am I missing?

Why not try <details>? Minimal CSS.

Edit fiddle - JSFiddle - Code Playground

You can do a lot using <details>

Edit fiddle - JSFiddle - Code Playground

[m_hutley]

@lurtnowski

#hide:target ~ #answer {

#hide has no sibling called #answer. (but yes, details is easier.)

[PaulOB]

@lurtnowski

what am I missing?

In your example the answer would need to be a sibling of the target with html like this.

<div class="row">
  <div class="col">
    <a id="hide" href="#hide" class="float-end"><span class="icon-chevron-down"></span> Show more</a>
    <a id="show" href="#show" class="float-end"><span class="icon-chevron-up"></span> Show less</a>
    <div id="answer" class="row">The answer</div>
  </div>
</div>

In your structure you could use :has but support is not good at the moment.

#answer,
#show,
#hide:target {
  display: none;
}

#hide:target + #show,
#hide:target ~ #answer {
  display: inherit;
}

.row:has(#hide:target) + #answer {
  display: inherit;
}

<div class="row">
  <div class="col">
    <a id="hide" href="#hide" class="float-end"><span class="icon-chevron-down"></span> Show more</a>
    <a id="show" href="#show" class="float-end"><span class="icon-chevron-up"></span> Show less</a>
  </div>
</div>
<div id="answer" class="row">The answer</div>

[lurtnowski]

thank, I went with using details…