ボタンをクリックした際に、ボタンの文字が「開く」の場合、スライドダウンさせ、「閉じる」の場合スライドアップさせるというものを作成したい

前提・実現したいこと

ボタンをクリックした際に、ボタンの文字が「開く」の場合、コンテンツをスライドダウンさせ表示し、
「閉じる」の場合スライドアップさせ非表示にというものを作成したいのですが、方法が分かりません。
slideToggleを使用せず、slideUpと、slideDownのみで行いたいです。
ボタンの文字列？を取得すればいいのだと思うのですが、取得方法も分かりません。
javascript、jQuery共に初心者です。
どうかご教示のほど宜しくお願い致します。

該当のソースコード

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>テスト</title>
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<script>
$(function(){
  var flg = "default";
  $('button').click(function(){
    if(flg == "default"){
      $("button").text("閉じる");
      flg = "changed";
    }else{
      $("button").text("開く");
      flg = "default";
    }
  });
});	

$(function(){
  $('button').click(function(){
	var textOpen = "開く";
    if(textOpen == "開く"){
      $("button").next().slideDown();
    }else{
      $("button").next().slideUp();	
    }
  });
});		

</script>
<style>
	
.contents {
	display: none;		
}	
	
</style>
<body>
<button>開く</button>
<div class="contents">コンテンツ内容</div>
</body>
</html>

kei344

2018/04/12 05:35

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

yambejp

2018/04/12 05:54

「slideToggleを使用せず、slideUpと、slideDownのみで行いたい」理由があれば記載して下さい

BamBam

2018/04/12 06:04

ご質問ありがとうございます。こちらの諸事情によるものです。今回はslideUpと、slideDownを使用しての対応方法をご教示いただきたいです。

BamBam

2018/04/13 08:54

ありがとうございます。無事解決しました。また機会がありましたら宜しくお願い致します。

行動規範の内容に同意します

回答4件

HTML
1<button data-open-label="開く" data-close-label="閉じる"></button>
2<div class="contents" style="display: none;">コンテンツ内容</div>

JavaScript
1jQuery(function($) {
2  var contents = $(".contents");
3  var button = contents.prev("button");
4
5  var slideToggle = function() {
6    if (button.hasClass("open")) {
7      button.text(button.data("close-label"));
8      contents.slideDown();
9    } else {
10      button.text(button.data("open-label"));
11      contents.slideUp();
12    }
13  };
14  slideToggle();
15
16  button.on("click", function() {
17　　button.toggleClass("open")
18    slideToggle();
19  });
20});
21

投稿2018/04/12 06:49

編集2018/04/12 06:54

root_jp

総合スコア4666

yambejp

2018/04/12 06:55

考え方はこういうのがモダンでいいですね

root_jp

2018/04/12 07:14

ボタンのラベルの初期値設定もスクリプトでやってしまっているので、スクリプトの処理が完了するまで、ボタンのラベルが空っぽの状態が一瞬できるなぁとかの懸念はあるんですけど、別解の案として投稿してみました。

BamBam

2018/04/13 08:54

ありがとうございます。無事解決しました。また機会がありましたら宜しくお願い致します。

行動規範の内容に同意します

CSS+ミニマルなスクリプトのみで
※jQueryのslideUp/slideDownを使っていないので直接的な回答ではありません.

HTML
1<button onclick="this.classList.toggle('show');"></button>
2<div class="contents">コンテンツ内容</div>

CSS
1button:before{
2	content: "開く";
3}
4button.show:before{
5	content: "閉じる";
6}
7.contents{
8	transition: all 1s ease;
9	overflow: hidden;
10	transform: scale(1, 0);
11	opacity: 0;
12	transform-origin: top;
13	pointer-events: none;
14}
15button.show+.contents{
16	transform: scale(1, 1);
17	opacity: 1;
18}

投稿2018/04/12 07:50

defghi1977

総合スコア4756

ベストアンサー

とりあえずこんな感じで

javascript
1$(function(){
2  $('button').on('click',function(){
3    if($(this).text()=="閉じる"){
4      $(this).text("開く");
5      $(this).next().slideUp();
6    }else if($(this).text()=="開く"){
7      $(this).text("閉じる");
8      $(this).next().slideDown();
9    }
10  });
11});

投稿2018/04/12 06:13

yambejp

総合スコア114829

BamBam

2018/04/13 08:55

ありがとうございます。無事解決しました。また機会がありましたら宜しくお願い致します。

行動規範の内容に同意します

文字列は見ませんけど
コンテンツが表示されているかどうかをチェックしています。

js
1$('button').on('click',function(){
2  var that = $(this);
3  var content = that.next();
4  if(content.is(':hidden')){
5    that.text('閉じる');
6    content.slideDown();
7  }else{
8    that.text('開く');
9    content.slideUp();
10  }
11});