jQueryのtoggleを活用したいろいろなUIパターンの実装方法

<div class="toggleWrap">
    <div class="toggleWrap_box">
      <button type="button" class="btn js-btn">toggleボタン</button>
      <p class="toggleWrap_txt">toggleで表示されるテキストだよ</p>
    </div>
</div>

$(function () {
  $('.js-btn').on('click', function () {
    if ($(this).next().css('display') == 'none') {
      $(this).next().slideDown();
    } else {
      $(this).next().slideUp();
    }
  });
});

$(function () {
  $('.js-btn').on('click', function () {
    $('.toggleWrap_txt').toggle();
  })
});

<div class="toggleWrap">
  <p class="demo_ttl">DEMO</p>
  <div class="toggleWrap_question js-btn">クリ★スタとは？？</div>
  <div class="toggleWrap_answer">クリエイターのスタートライン！をコンセプトにしたWebデザインやコーディング初学者の応援メディアです！</div>
  <div class="toggleWrap_question js-btn"> #クリスタチャレンジとは？？</div>
  <div class="toggleWrap_answer">サイト内で配布しているコーディング練習用カンプのチャレンジ企画です！気になるかたは見てみてね！<a href="https://pengi-n.co.jp/blog/cording-training/" target="_blank" rel="noopener noreferrer">【デザインカンプ無料配布】未経験からのコーディング学習ステップ</a></div>
</div>

* {
		list-style: none;
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	.toggleWrap {
		max-width: 500px;
		padding: 20px;
		background-color: #f5f0ec;
	}

	.toggleWrap_question {
		width: 100%;
		padding: 10px;
		border-bottom: 1px solid #b0d4f8;
		background-color: #eba359;
		text-align: center;
		transition: opacity .4s;
	}

	.toggleWrap_question:hover {
		opacity: .7;
		cursor: pointer;
	}

	.toggleWrap_answer {
		display: none;
		width: 100%;
		padding: 20px;
		background-color: #f1ddc9;
		color: #0c0c0c;
	}

	.demo_ttl {
		padding-bottom: 30px;
		text-align: center;
		font-weight: bold;
	}

$(function () {
  $('.js-btn').on('click', function () {
    $(this).next().slideToggle();
  });
});

<div class="fadeToggle_box">
	<div class="modal">
		<p class="modal_txt">fadeToggleでポップアップ表示</p>
	</div>
	<p class="demo_ttl">DEMO</p>
	<button type="button" class="btn js-btn">fadeToggleボタン</button>
	<p class="hidden_txt">※ボタンを押してポップアップを消す</p>
</div>

* {
		list-style: none;
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	button {
		margin: 0;
		padding: 0;
		outline: none;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: inherit;
		vertical-align: middle;
		font: inherit;
		cursor: pointer;
	}

	.fadeToggle_box {
		position: relative;
		height: 200px;
		max-width: 400px;
		background-color: #f5f0ec;
	}

	.modal {
		display: none;
		position: absolute;
		top: 0;
		right: -330px;
		z-index: 2;
		width: 300px;
		height: 300px;
		border-radius: 10px;
		background-color: #eba359;
	}

	.modal_txt {
		color: #fafafa;
		text-align: center;
		line-height: 300px;
	}

	.btn {
		display: block;
		margin: 0 auto;
		padding: 10px;
		outline: 1px solid #eba359;
		background-color: transparent;
		color: #333;
		text-align: center;
		transition: background-color .4s;
	}

	.btn:hover {
		background-color: #eba359;
		color: #fafafa;
	}

	.hidden_txt {
		display: none;
		margin-top: 10px;
		text-align: center;
	}

	.demo_ttl {
		padding-bottom: 30px;
		text-align: center;
		font-weight: bold;
	}

$(function () {
  $('.js-btn').on('click', function () {
				$('.hidden_txt').fadeToggle(200);
				$('.modal').fadeToggle(600);
		});
});

<div class="slide_box"></div>

.slide_box {
		width: 100%;
		height: 100px;
		margin-top: 10px;
		outline: 1px solid #eba359;
		background-color: transparent;
		transition: background-color .3s;
	}

.slide_box.toggle {
		background-color: #f36021;
	}

.burger_btn {
		display: block;
		position: relative;
		width: 45px;
		height: 30px;
		cursor: pointer;
	}

	.bar {
		display: block;
		width: 45px;
		height: 3px;
		background-color: #333;
		transition: transform .3s;
	}

	.bar_top {
		position: absolute;
		top: 0;
	}

	.bar_mid {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}

	.bar_bottom {
		position: absolute;
		bottom: 0;
	}

/* 以下、jQueryでつけ外しするスタイル（closeクラス） */
	.burger_btn.demo-close .bar_top {
		transform: translateY(13px) rotate(45deg);
		transition: transform .3s;
	}

	.burger_btn.demo-close .bar_mid {
		opacity: 0;
		transition: opacity .3s;
	}

	.burger_btn.demo-close .bar_bottom {
		transform: translateY(-13px) rotate(-45deg);
		transition: transform .3s;
	}

$(function () {
 　 $('.js_burger_btn').on('click', function () {
	$('.burger_btn').toggleClass('demo-close');
　　  })
});