CSS visibility and block doesn't work when I am trying to animation

Question

So I make something very basic.

I want to make a button have a slide down feature using CSS. However it doesn't seem to work. In fact it seems like CSS maybe has removed it for everything except for the body.

h3 {
    display: none;
}

body:active h3 {
    display: block;
    opacity: 2;
}

<div class="subcontent"> <h3>words here</h3></div>

The thing is I don't feel the need to add the code for the button because no matter what I do it doesn't work. I can create a text using p and try to make it so that when you click on it or hover over it it would make the the div pop up. However it doesn't. Literally nothing works. I can put anything to replace body nothing seems to work. The only thing that seems to work is body. Which I find weird. Why isn't working? Literally it is so simple and I search online and people who are using visibility make it work and they don't even need bunch coding. Just add animations and all that. All I want is to make this work so I can add whatever I want to edit it. However it isn't working no matter what I replace it with. Why isn't it only working on body only?

Tried everything doesn't work. Only thing that works is using body. I tried doing it to just .subcontent but it didn't work so I added h3 to the words to see if that would do anything but it still didn't work.

Answer 1

Here you have it.

<style>
.subcontent {
    opacity: 0; /*instead of display: none*/
    transition: all 0.2s; /*by decreasing this number, the animation gets faster*/
    top: -20px; /*for the sliding motion*/
    position: relative;
}

h3:active + .subcontent {
    transition: all 0.2s;/*by decreasing this number, the animation gets faster*/
    opacity: 1;/*instead of display: block !important*/
    top: 0px;
}
</style>

<h3>Heading</h3>
<div class="subcontent">words here, words here, words here, words here, words here, words here, words here, words here, words here, words here, words here, words here  </div>

As @G-Cyrillus said, display cannot be animated.

I used opacity:0 instead of display: none;.

And I've added a top: -20 for a sliding motion.

Here's a better approach, that keeps the sub-content open until the heading is clicked again:

label.btn {
  display: block;
  cursor: pointer;
}

label.btn input {
  opacity: 0;
}

.wrap .subcontent {
  height: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  transition: all 0.5s;
}

.wrap {
  padding: 0;
  margin: 0
}

.wrap:has(input:checked) .subcontent {
  height: 100px;
  transition: all 0.5s;
}

<div class="wrap">
  <label class="btn"><input type="checkbox"><h3>Heading</h3></label>
  <div class="subcontent">words here, words here, words here... </div>
</div>