
下記サイトの「Read more」をクリックすると
折りたたみ式で「続き」の内容が表示される機能がありますが
http://artifact-jp.com/
普通の入力フォームページ(HTML)で、
同じ様なことをしなくてはならず大変困っております。
checkbox、radiobuttonをクリックして
同じことが出来ますでしょうか?
(表示したい内容は入力フォームです)
検索では大量にHITしますがこのパターンを見つけられませんでした
■radiobuttonを選択すると、
表示出来る方法。
■checkboxのチェックを外すと、
表示出来る方法。(ページを開いた際は続きが非表示でチェックはchecked)
※出来れば、表示するHTML(内容)を読み込むのではなく
同HTML内に記述しておきたいのですが
それは難しいでしょうか?
サンプルJavaScriptを提示せず、難しい質問で恐縮ですが
シンプルなソースを教えて頂けないでしょうか。
よろしくお願いします(>_<)
イメージはこんな感じです。
******************************************************
(checkboxの場合)
□続きが表示されます(チェックを外すと表示)
↓
あいうえおかきくけこさしすせそなにぬねの
あいうえおかきくけこさしすせそなにぬねの
あいうえおかきくけこさしすせそなにぬねの
******************************************************
(radiobuttonの場合)
●続きが表示されます ○続きを表示しない
↓
あいうえおかきくけこさしすせそなにぬねの
あいうえおかきくけこさしすせそなにぬねの
あいうえおかきくけこさしすせそなにぬねの
******************************************************
No.1ベストアンサー
- 回答日時:
こんな感じでどうでしょう?
<input type="checkbox" onClick="a1.display=(this.checked?'':'none')">続きが表示されます</br>
<div id="area1" style="display:none">
あいうえおかきくけこさしすせそなにぬねの<br>
あいうえおかきくけこさしすせそなにぬねの<br>
あいうえおかきくけこさしすせそなにぬねの<br>
</div>
<hr>
<input type="radio" name="r1" onClick="a2.display=''">続きが表示されます
<input type="radio" name="r1" checked onClick="a2.display='none'">続きを表示しない<br>
<div id="area2" style="display:none">
あいうえおかきくけこさしすせそなにぬねの<br>
あいうえおかきくけこさしすせそなにぬねの<br>
あいうえおかきくけこさしすせそなにぬねの<br>
</div>
<script language="javascript">
a1=document.getElementById('area1').style
a2=document.getElementById('area2').style
</script>
yambejpさんありがとうございます!!
シンプルでわかりやすいソースですネ!
自分は凄い複雑なソースをイメージしていたので、正直驚きました。
今試して見たら問題なく動作してます。
恐縮ですが、また何かありましたらお力添えをお願いします。
yambejpさん本当にありがとうございました(>_<)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript ラジオボタンによるフォームの開閉を行いたい 3 2022/03/31 21:30
- JavaScript 読み込んだQRコードをフォームに受け渡したい 1 2023/05/18 11:18
- WordPress(ワードプレス) WordpressでYouTubeの埋め込みができない。 1 2022/10/26 01:08
- MySQL MySQL,JavaScript,PHPコードの結果を表示する方法を教えてください。 1 2023/02/13 17:49
- JavaScript 空白で入力フォームのボタンをクリックしたら、ブラウザの上部からjavascriptで 表示されるアラ 1 2022/05/20 11:16
- アプリ Edgeを操作するアプリについて 4 2023/05/11 22:48
- オープンソース AWSドメイン名でApacheテスト・ページを表示させる方法を教えて下さい。 1 2023/04/26 15:59
- JavaScript javaScriptで画面に値を入れるには 1 2022/08/14 12:27
- WordPress(ワードプレス) ワードプレスで、投稿一覧ページにタグを表示する方法 投稿につけたタグを、記事一覧ページにもカテゴリと 1 2023/05/10 21:41
- フリーソフト libreoffice drawのツールバーのチェックが外れてしまう 1 2022/10/04 22:02
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
指定したパスが現URLに含まれて...
-
自働生成される<div>タグに連番...
-
createElementで作成した要素を...
-
クリックすると下に説明文が出...
-
ネストされたハッシュの値から...
-
クリックで色変更後に既に変更...
-
JavascriptでDIV~DIVをリロードで
-
テキストエリア内の一部の文字...
-
読み込んだQRコードをフォーム...
-
IFRAMEの表示/非表示を切り替え...
-
折りたたみ式JavaScriptをcheck...
-
[急ぎ] videoタグで埋め込んだm...
-
プルダウンとチェックボックス...
-
javascript ループ中の処理
-
classの中の<a>タグにidを追加
-
removeEventListenerについて
-
一覧をタブメニューで絞り込ん...
-
HTMLタグに複数のクラスを設定...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
IFRAMEの表示/非表示を切り替え...
-
removeEventListenerについて
-
背景色を透明化
-
createElementで作成した要素を...
-
javascriptでpostした値が取得...
-
読み込んだQRコードをフォーム...
-
iframe内のリンクが飛ばないの...
-
jQueryでクリックされた要素のi...
-
ダブルクォーテーションが消え...
-
<div ~ </div> で囲まれたテキ...
-
【HP作成】クリックすると下...
-
<Div>の中の要素の数を調べる
-
jQueryで特定id以外の下にある...
-
VBScript+IEのチェックボック...
-
removeAttribute()メソッドで削...
-
折りたたみ部分にアンカーでリ...
-
onclickを利用した伸縮メニュー...
-
背景色を一定時間ごとにランダ...
おすすめ情報