![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
現在下記のような、下に開閉するアコーディオンを作成しています。
動き的にはうまく行っているのですが、
「1行目」「2行目」は表示させておき「3行目」から同様の動きに変更したいのですが、
どのようにすればよろしいでしょうか。
(できれば「1、2行目」の見せる部分と「3行目」の閉じている部分は<div>などで分けたくないのです。)
heightなどで高さを指定して2行分を表示させるやり方でも構いません。
教えてくださいお願い致します。
------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4. …
<script type="text/javascript">
$(document).ready(function(){
$(".more").css('cursor', 'pointer').click(function(){
$(this).prev(".detail").slideToggle('slow');
$(this).toggleClass("active");
return false;
});
});
</script>
<style type="text/css">
body{margin:0;padding:0;}
.box {
width: 500px;
}
.more {
width: 500px;
height: 20px;
background: #ccc;
text-align:center
}
.more_box.active {
width: 500px;
height: 20px;
background: #DCDCDC;
}
.detail_more {
display: none;
}
</style>
</head>
<body>
<div class="box">
<div class="detail">
<p>1行目1行目1行目1行目1行目1行目1行目</p>
<p>2行目2行目2行目2行目2行目2行目2行目</p>
<p>3行目3行目3行目3行目3行目3行目3行目</p>
<p>4行目4行目4行目4行目4行目4行目4行目</p>
<p>5行目5行目5行目5行目5行目5行目5行目</p>
</div>
<div class="more">全文表示</div>
</div>
</body>
</html>
------------------------------------------------------------------------
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
A No1です。
>希望としている形は以下のようにしたいと思っています
サンプルの初期状態は御希望のようになっているはずですが…?
そのままコピペして、全角空白を半角にしてから試してみてください。
>「1行目」「2行目」は
~~
>このことを意味しています。
その場合は、No1にも書きましたように、3番目の段落要素のoffsetを残す高さとするようになさればよろしいかと思います。
No.1
- 回答日時:
>「1行目」「2行目」
というのが段落を意味しているのか、普通に改行の2行分を意味するのか不明なのと、段落が複数行に渡ることがないのかわからないので、額面どおりの行数2行分を常に開いておくというサンプルを…
意味が違っている場合は、同じ考え方で基準とする対象を変えればよいだけなので、アレンジしてください。
文字サイズもいろいろな可能性があるので、2行の<div>を作成してその高さを測っています。
段落2個分という意味の場合は、こんなことをしなくても3番目の段落までのoffsetをとればよいでしょう。
(全角空白は半角に)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
body{margin:0;padding:0;}
.box {
width: 500px;
}
.more {
width: 500px;
height: 20px;
background: #ccc;
text-align:center
}
.more.active {
width: 500px;
height: 20px;
background: #DCDCDC;
}
/*
.detail_more {
display: none;
}
*/
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7. …
<script type="text/javascript">
<!--
$(document).ready(function(){
$(".more").css("cursor", "pointer").each(function(){
var wrap = $(this).prev(".detail").css("overflow", "hidden");
var h0 = wrap.height();
var line2 = wrap.children(":first-child").before("<div>あ<br>い</div>").prev().height();
wrap.css("height", line2).children(":first-child").remove();
$(this).toggle(function(){
$(this).addClass("active");
wrap.stop().animate({height: h0}, {duration: "slow"});
}, function(){
$(this).removeClass("active");
wrap.stop().animate({height: line2}, {duration: "slow"});
});
});
});
//-->
</script>
</head>
<body>
<div class="box">
<div class="detail">
<p>1行目1行目1行目1行目1行目1行目1行目</p>
<p>2行目2行目2行目2行目2行目2行目2行目</p>
<p>3行目3行目3行目3行目3行目3行目3行目</p>
<p>4行目4行目4行目4行目4行目4行目4行目</p>
<p>5行目5行目5行目5行目5行目5行目5行目</p>
</div>
<div class="more">全文表示</div>
</div>
<!-- 行の高さが違ったり、改行がある場合のテスト -->
<div class="box" style="width:150px;line-height:2em;">
<div class="detail">
<p>1行目1行目1行目1行目1行目1行目1行目</p>
<p>2行目2行目2行目2行目2行目2行目2行目</p>
<p>3行目3行目3行目3行目3行目3行目3行目</p>
<p>4行目4行目4行目4行目4行目4行目4行目</p>
<p>5行目5行目5行目5行目5行目5行目5行目</p>
</div>
<div class="more">全文表示</div>
</div>
</body>
</html>
* <p>のmarginがあるため、見た目に2行に見えない場合がありますが、CSSに
p{ margin:0; padding:0; }
を追加してみれば、2行分であることが確認できると思います。
この回答への補足
ご回答いただきありがとうございます。
またご説明不足で申し訳ございません。
「1行目」「2行目」は
<p>1行目1行目1行目1行目1行目1行目1行目</p>
<p>2行目2行目2行目2行目2行目2行目2行目</p>
このことを意味しています。
最初のコードが少しおかしかったのか、
アコーディオンがオープン状態でいました。。
希望としている形は以下のようにしたいと思っています。
----------------------------------
1行目1行目1行目1行目1行目1行目1行目
2行目2行目2行目2行目2行目2行目2行目
[全文表示]
↓全文表示クリック時
1行目1行目1行目1行目1行目1行目1行目
2行目2行目2行目2行目2行目2行目2行目
3行目3行目3行目3行目3行目3行目3行目
4行目4行目4行目4行目4行目4行目4行目
5行目5行目5行目5行目5行目5行目5行目
[全文表示]
----------------------------------
今一度ご回答頂けると助かります。
よろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jqueryアコーディオンの上部の...
-
【JavaScript】検索がヒットし...
-
jQuery クリックした後の動き
-
「ご処理進めて頂きますようお...
-
CloseとDisposeの違い
-
エクセルで、日付を入力すると...
-
VBAでループ内で使う変数名を可...
-
Excelシート上のマクロを登録し...
-
FFTの結果ついて
-
エクセルVBAで、MsgBox やInput...
-
「PC Helpsoft Driver Updated...
-
エクセルの画面にユーザーフォ...
-
EXCEL VBA マクロ 実行する度に...
-
Excel ラジオボタンのリセット...
-
メルカリのメルカードで買い物...
-
PowerPoint VBA で画像の鮮明度...
-
メッセージボックスの背景色
-
Googleフォーム・複数人の申し...
-
NULLを含むフィールド値の条件分岐
-
マクロで作ったボタンのサイズ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
確認ダイアログを次からは表示...
-
CSSでreadonlyの機能はあり...
-
formのsubmitを押すとモーダル...
-
Q&A掲示板の入力フォームに文字...
-
JavascriptのHTMLクラス表示に...
-
3重のクォーテーション
-
JavaScriptのinnerHTMLの挙動に...
-
特定の条件のHTML要素を一括で...
-
クリックすると、色が変わるよ...
-
jqueryを使ったスムーススクロ...
-
折りたたみを全て開いて別ペー...
-
jQuery 画面サイズにスライド画...
-
2回目以降のページロード時には...
-
Bootstrap Javascriptでモーダル
-
jQueryのSlickで矢印アイコンが...
-
javascriptとcssでフォントサイ...
-
JavaScriptのdiv.style属性の変...
-
フォームで「パスワード(確認...
-
macかwinか判別しスタイルシー...
-
javascript htmlの追記について
おすすめ情報