詳しい人求む！

ブラウザ上でリストの出し入れ

解決済

質問者：risaghon
質問日時：2018/11/13 09:51
回答数：3件

htmlを書かれていらっしゃるかたへの質問なのですが、ブラウザ上にて
・プルダウンではなく
・下記URLの質問欄のように『ｖ』をクリックするとウインドウが開いて
　多くの情報を表示させて
・『＾』をクリックすると開いていたウインドウが閉じて画面がスッキリ
　する
というhtmlを書きたいと思っています。
参考URL : https://teratail.com/questions/15395

ggrksというかたがいらっしゃいますが、検索ワードが短くなりませんので
ググることも出来ません。

プルダウンの場合、カーソルを外すと閉じてしまいますけれど、上記URL
の質問欄ではカーソルを外しても拡張されたウインドウは閉じません。

このような書き方をご存じのかた、お願いいたします。

ちなみに、上記URLのソースを見てみましたけれど、

<pre class="language-php"><code class="language-php" data-language=PHP><?php
ほにゃらら
?></code></pre>

が関係していそう…
くらいしか理解出来ておりませんので、基本から教えて戴きたいです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： iiii97
回答日時：2018/11/14 01:13

ごく簡単なサンプル

<html lang="ja">
<head>
<style type="text/css">
.box{
overflow: hidden;
height: 60px;
border: 1px blue solid;
cursor: hand;
}
</style>
<script type="text/javascript">
function openClose(o){
o.style.height = o.style.height == "auto" ? "" : "auto";
}
</script>
</head>
<body>
1<br />
<div class="box" onclick="openClose(this)">
2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />
</div>
11
<div class="box" onclick="openClose(this)">
12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />
</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます
サンプル戴けまして感謝感謝です
class="box"
の記述が分かりやすいです

通報する

お礼日時：2018/11/14 10:29

参考程度に

No.2

回答者： fujillin
回答日時：2018/11/13 13:11

こんにちは

ご提示のサイトの実際の方法を確認してはいませんが、いわゆる「続きを読む」ってやつですね。

多くのものはjavascriptを利用して実現しているものと思います。
https://www.google.co.jp/search?num=30&rlz=1C1GG …

見た目は同じようでも、具体的な方法はいろいろ考えられます。
https://teratail.com/questions/26858
https://allabout.co.jp/gm/gc/459102/
https://webparts.cman.jp/button/nextread/

CSS3ではアニメーションも可能になっているので、CSSのみでも実現できそうだと思ったら、紹介しているサイトがありました。
https://metrograph.jp/css_gradation_paragraph/