編集画面で文章を折り畳んだり展開をしたい

こんにちは、

役に立つかどうかは、わかりませんが

例えば、

<h2 class="toggle" tabindex="0">hello</h2>
<div class="content">lorem...</div>
<h2>hello</h2>
<div class="content">lorem...</div>
<h2>hello</h2>
<div class="content">lorem...</div>

といったHTMLを記述するといった前提だと、

.toggle:focus ~ .content,.toggle:active ~ .content{
     visibility:hidden;
     position:absolute;
}
.content{
     visibility:visible;
     position:relative;
}

といったCSSを記述してやれば、プリビューなどで最初のh2をクリックすると、divは非表示になります。

普通は、h2をクリックする事は出来ないですが、tabindexを使うと、クリックできるようになります。

実際にこれが、動くかどうかは、それぞれのテーマ次第ですが、

raindrops — Free WordPress Themes

というテーマで、投稿本文と、cssはこの投稿のCSSというテキストエリアに、上記のコードを記述して確認しています。（Chrome）

ビジュアルエディタでは、クリックして押しっぱなしにしないとタイトルだけ表示は出来ないみたいですが、プリビューや、ブログを表示した場合には、動作するみたいです。

動作原理が解かったら、いろいろ工夫できると思います。

HTML5のdetail要素でも、コンテンツの開閉は出来るみたいなので、そういうのも一度確認しておくといいかも、、、

Can I use… Support tables for HTML5, CSS3, etc

• この返信は6年、 7ヶ月前にnobitaが編集しました。
• この返信は6年、 7ヶ月前にnobitaが編集しました。

ただ、目次表示系のプラグインを入れていると、記事先頭に見出しだけが表示できますので、現状では私はそれで
見出しを確認しています。

そうなんですね、私もTOCプラグインを使えばいいんじゃないかとも思っていたのですが、、、

ビジュアルエディター上で、TOC　が表示できるといいという事ですかね？

プラグインがどんな仕組みかわからないので、確たることは言えませんが、ショートコードなんかで表示できるものだと、

ショートコードの実行結果を表示できるフィルターもあるので、そういうのも検討してみてはどうでしょう

投稿内でショートコードを実行する – WordPress Snippet

役に立たない答えばかりでごめんなさい

そうなんですね、

テキストエディタなんかでそういった機能を持っているものは、あると思います。

秀丸エディタ、表示/折り畳み　なんかのメニューで本文を折りたたむことが出来ると思います。

多分いろんなエディターで、折り畳み機能はあるんじゃないかと思います。

あと、余計な事ですが　WordPress5で、エディタが　gutenberg　に変更になるかも、って話は聞いていますか？

今だと、Gutenberg — WordPress Plugins で、試用できるようになっていますが、そのエディタでは、
Content Structureという〇にiて書いてるボタンがあって、そこに見出しなどのアウトラインが表示されて、例えばh2を使っていたら、クリックすると、そのh2に移動する機能があるので、そういうもので、結構わかりやすくなるかも、なんて思いました。