<div class="title">ここを押すと表示／非表示が切り替わるよ</div>
<p class="article hidden">★表示されたり消えたりするよ★</p>
<div>ここには別の要素を置いておくよ</div>

.title{
  font-weight: bold;
  cursor: pointer;
}

.title-after{
	color: #CCC;
}

.hidden {
  display: none;
}

.show {
	display: block;
  animation-name: showAnime; 
  animation-duration: 2s; 
  animation-fill-mode: forwards;
  perspective: 10; /*スマホのちらつき防止*/
  -webkit-perspective: 10;
}

@keyframes showAnime {
0% {
  opacity: 0;
  color:#000;
}
90% {
 opacity: 1;
 color:#000;
}
}

let title = document.getElementsByClassName("title")[0];
let article = document.getElementsByClassName("article")[0];

title.addEventListener("click", ()=>{
  article.classList.toggle("hidden");
  article.classList.toggle("show");
  title.classList.toggle("title-after");
});

<details>
  <summary>ここがsummaryです。そして...</summary>
  <p>ここに詳細な説明を書くことができます。</p>
</details>

<details>
  <summary>ここがsummaryです。そして...</summary>
  <div class="content">ここに詳細な説明を書くことができます。<br/>
                       アニメーションになりましたか？</div>
</details>

details[open] .content {
 animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
  0% {
    opacity: 0; 
    transform: translateY(-10px); 
  }
  100% {
    opacity: 1;
    transform: none;
  }
}