JS スライドトグルのプレイリストにするには？

質問

JavaScript スライドトグルの音楽プレイリストにするには？

現在、編集中のデータがテキストエリアにあります。
複数のプレイリストで、
1) 巻(VOLUME)ごとに分類されていません。
2) また、タイトル（巻、VOLUME）が無い状態です。

＜仕様＞
・これらを順番に「VOLUME 01」のようなタイトルを付けます。
・編集後は result要素に出力させます。
・初めはタイトルだけが表示されている。
・タイトルをクリックすると内容が表示・非表示でスライドトグルされる。

このようにするには、どんなコードでできますか？

[HTML]
<textarea id="genkou" cols=80 rows=60>
01 Billy Preston - Let Me Know (2:04)
02 Frank Evans - Lonely Town (2:35)
03 Patsy Montana - 16 Pounds (2:32)
04 Stevie Wonder - Lois (2:29)
05 The Tymes - With All My Heart (2:12)
06 George Greeley - Ride The High Country (2:27)
07 Linda Lanzetta - President Kennedy Cha Cha (2:10)
08 Craig Douglas - Time (2:23)
09 Jimmie Beaumont - Give Her My Best (2:02)
10 Gunther Neefs - A Hundred Pounds Of Clay (2:47)
11 Jimmy Justice - Up On The Roof (2:34)
12 Enoch Light & The Light Brigade - I Want To Be Happy Cha Cha (2:32)
13 Dean Martin - I Will (2:21)
14 Claire Chevalier - Va (2:55)
15 Little Eva - Stand By Me (2:25)
16 Petula Clark - Partir, Il Nous Faut (2:31)
17 Connie Francis - Una Notte Cosi (2:11)
18 Barritas - Se Io Ti Regalo Un Fiore (2:09)
19 Joey Heatherton - Live And Learn (2:09)
20 Henry Mancini - Patricia (1:57)
01 The American Sisters - Never On Saturday (2:02)
02 Jackie Edwards - Only A Fool Breaks His Own Heart (2:23)
03 Steve Alaimo - I Won't Let You Go (2:14)
04 Maureen Evans - Never In A Million Years (2:16)
05 Brian Hyland - Baby Face (1:54)
06 Christer Sjögren - She's Not You (2:16)
07 Elder Barber - El Vendedor De Melones (2:34)
08 Elvis Presley - Fun In Acapulco (2:30)
09 Ennio Sangiusto - Chariot (2:22)
10 Emperor Rosko - Al Capone (3:34)
11 Eydie Gorme - My Heart (2:49)
12 The Fives Royales - Catch That Teardrop (2:45)
13 Frida Boccara - La Más Bella Del Baile (2:28)
14 Gene Latter - Too Busy Thinking About My Baby (3:15)
15 Conny Froboess - Tanz Noch Einmal Mit Mir (2:22)
16 Gerry Granahan - Unchained Melody (2:05)
17 Helena Lemkovitch - Paradis Paradis - (2:20)
18 Paul Severs - Ange (Angel) (2:36)
19 Jackie Lynton - Don't Take Away Your Love (2:51)
20 James Booker - Gonzo (2:26)
01 The Playmates - While The Record Goes Around (2:11)
02 Al Alberts - Before Tomorrow Is Yesterday (2:28)
03 Jimmy Beaumont -There's No Other Love (2:10)
04 Jimmy Hughes - My Loving Time. (2:03)
05 Jo Leemans - Weet Je Nog Wel Die Avond In De Regen (2:08)
06 Sarah Vaughan - Smooth Operator (2:27)
07 The Professionals - Maigret Theme (2:53)
08 Ray Jameson - José (Rozez) (2:04)
09 Prince Buster & The All Stars - Django Fever (3:09)
10 Richard Chamberlain -You Always Hurt The One You Love (2:05)
11 Claudia Sylva - Quand Tu M'ouvres Les Bras (2:37)
12 Eliza - Broken Hearted Melody
13 Little Peggy March - Te Ne Vai (2:27)
14 Shelley Fabares - Breaking Up Is Hard To Do (2:07)
15 Jill Jackson - All Over Again (2:23)
16 Linda Scott - Catch A Fallin' Star (1:43)
17 Bob Mc Fadden - The Sheik Of Araby (2:23)
18 Alice & Ellen Kessler - Johnny Angel (2:11)
19 Terry Stafford - Kiss Me Quick (2:42)
20 Henri Mancini - Theme (From Cade's Country) (2:05)
</textarea>

<div>
<button id="btn">実行ボタン</button>
</div>

<div id="result"></div>

回答No.5

AsarKingChang

弱点は＾＾
transition: 1s linear;
動いてるように見せるために、1秒の時差を持ってるので、
閉じた時にも働いてしまってる程度？？
後は、中身に、入れたいもの突っ込めばいいんじゃないかな～って。。
このやり方table使えないけど、今はtableは非推奨系なので、まいっか～ってな。。
ul li の フローティング横並びでの、width指定とかで行く時代なので、
ま～それもありかな～と。。なお、こちらコーダーじゃないので、修飾は苦手＾＾
というか、単なる、酒呑み爺です（こちら）あはは。

回答No.4

AsarKingChang

>フォントを変えるための回答であり
わかってます。だからこちらノータッチにしたんです＾＾

<style>
.cont {
max-height: 0;
overflow: hidden;
transition: 1s linear;
margin-left:8px;
}
.btn {
display:none;
}
.btn:checked + .btn2 {
color:red;
}
.btn:checked + .btn2 + .cont {
max-height: 50em;
}
</style>

<input type="checkbox" class=btn id=yay1><label class=btn2 for=yay1>なにか</label>
<div class=cont>あああ<br>あああ<br>あああ<br>あああ<br></div>
</input>

<input type="checkbox" class=btn id=yay2><label class=btn2 for=yay2>なにか</label>
<div class=cont>あああ<br>あああ<br>あああ<br>あああ<br></div></input>

<input type="checkbox" class=btn id=yay3><label class=btn2 for=yay3>なにか</label>
<div class=cont>あああ<br>あああ<br>あああ<br>あああ<br></div>
</input>

<input type="checkbox" class=btn id=yay4><label class=btn2 for=yay4>なにか</label>
<div class=cont>あああ<br>あああ<br>あああ<br>あああ<br></div></input>

今回の件の「遊び」
（相当、あほだな私）

回答No.3

AsarKingChang

もう1個。。
1つ前の板の、TEXTAREAの色ですが。
TEXTAREA風のDIVを作って、scroll:autoでスクロールバー出して、
エディット可能な状態にして、FORM::submitで、
その偽DIV TEXTAREAのinnerを取得しつつ、POSTに混ぜれば
単にHTMLでできることが全部できるんじゃないかな～とは
思ってたが、なんか回答付いてたので、スルーしてました。
回答した人の邪魔しないように、放置してましたわ。。

補足

TEXTAREAの色の件
残念ながら、回答した人のは、
フォントを変えるための回答であり、
色属性を任意に変更するものでは
ありませんでした。

回答No.2

AsarKingChang

>各巻（VOLUME）の先頭が「０１」なので
>それを取得したら押下する要素を生成して出力する。
>それでよろしいのではないかと・・・。

そそ
これをセパレーターの境界線とすればいいだけですからね。
「今の数+1＝次のラインの数字ですか？」
でも「次の数が01か？」でも、なんとでもできますからね。
後は、JSで、div display:none&show;でON/OFFするか、
CSSのみで、チェックボックスCSSをつかって
全部の箱のCSS none;
要素::checked > 1つ次の箱のCSSのオーバーライド show;
だけで、動作させるか。。
その程度でいいんじゃないかな～
（だるいので今回は作らないでおきますが、
　恐らく、私ならこう書くだろうな～ってのが、
　質問者さんすでに分かってるので、今回ソース省略）

補足

displayのプロパティで表示・非表示は容易ですが、
「スライドトグル」は上手くいきますか？

今回は見合わせ！？
次回の質問（設問）にまた、ご助言をお願い致します。

回答No.1

AsarKingChang

この前私が書いたやつをちょい改造して、
番号が「今より若くなったら」＝VOLUME +1（オリジン１でやれば同じになる気がする）
と判断すれば自動化できるんじゃないかな～と感じましたが。
若くなるだと、違和感があるので、
「元番号+1」が「次の行と一致しないなら」でもいいかもですが。

お礼

ご回答ありがとうございます。

補足

AsarKingChangさん
いつもご協力をありがとうございます。

各巻（VOLUME）の先頭が「０１」なので
それを取得したら押下する要素を生成して出力する。
それでよろしいのではないかと・・・。

書き出しには、
いろいろな要素（タグ）が使えるので お好みで！

div, ol, ul, dl,dt,dd, table, etc.