クリックして表示・非表示を切り替える

クリックイベント

アコーディオンメニュークリック切り替え、タブメニューのクリック切り替え、チェックボックスのクリック切り替えによる表示・非表示のサンプルコードです

コース内容

１．基本コース

1on1セッション

1ヶ月: 12,000円/月
3ヶ月: 11,000円/月
6ヶ月: 10,000円/月

2．標準コース

1on1セッションチャットの相談セッション報告書

1ヶ月: 16,000円/月
3ヶ月: 14,000円/月
6ヶ月: 12,000円/月

3．フルコース

1on1セッションチャットの相談セッション報告書面談対応

1ヶ月: 30,000円/月
3ヶ月: 25,000円/月
6ヶ月: 20,000円/月

【クリック切り替え01 : アコーディオン】

・PCは700px幅、スマホは全幅にしています。 ※PCの際、中身の要素が少ないのに全幅表示するとバランスが悪く見えます。 ——————————————————- ・アコーディオンメニューのtitleがクリックされた場合 $(“.title”).on(“click”, function() { ・titleクラスの次の要素.itemの表示・非表示を切り替える ※最初は.itemをdisplay: none;指示する。titleがクリックされた場合、display: block;に変化する $(this).next().slideToggle(); ・titleクラスにopenクラスを追加したり削除したりする・openクラスの追加、削除を行うことで－と＋の切り替えを行う $(this).toggleClass(“open”); }); ——————————————————-

HTML

<h1 class="column-t">コース内容</h1>
<div class="column">
  <p class="ac-title">１．基本コース</p>
  <div class="item">
    <p><i class="fas fa-clipboard-check"></i> 1on1セッション</p>
    <dl>
      <dt>1ヶ月</dt>
      <dd>12,000<span>円/月</span></dd>
      <dt>3ヶ月</dt>
      <dd>11,000<span>円/月</span></dd>
      <dt>6ヶ月</dt>
      <dd>10,000<span>円/月</span></dd>
    </dl>
  </div>
</div>
<div class="column">
  <p class="ac-title">2．標準コース</p>
  <div class="item">
    <p>
      <i class="fas fa-clipboard-check"></i> 1on1セッション<br>
      <i class="fas fa-clipboard-check"></i> チャットの相談<br>
      <i class="fas fa-clipboard-check"></i> セッション報告書
    </p>
    <dl>
      <dt>1ヶ月</dt>
      <dd>16,000<span>円/月</span></dd>
      <dt>3ヶ月</dt>
      <dd>14,000<span>円/月</span></dd>
      <dt>6ヶ月</dt>
      <dd>12,000<span>円/月</span></dd>
    </dl>
  </div>
</div>
<div class="column b-line">
  <p class="ac-title">3．フルコース</p>
  <div class="item">
    <p>
      <i class="fas fa-clipboard-check"></i> 1on1セッション<br>
      <i class="fas fa-clipboard-check"></i> チャットの相談<br>
      <i class="fas fa-clipboard-check"></i> セッション報告書<br>
      <i class="fas fa-clipboard-check"></i> 面談対応
    </p>
    <dl>
      <dt>1ヶ月</dt>
      <dd>30,000<span>円/月</span></dd>
      <dt>3ヶ月</dt>
      <dd>25,000<span>円/月</span></dd>
      <dt>6ヶ月</dt>
      <dd>20,000<span>円/月</span></dd>
    </dl>
  </div>
</div>

css

.column-t {
  font-size: 1.6rem;
  font-weight: bold;
  padding: 20px;
}

.column {
  width: 700px;
  margin: 0 auto;
  position: relative;
  display: block;
}

.column.b-line {
  border-bottom: 1px solid #333;
}

.column .ac-title {
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: bold;
  padding: 40px;
  border-top: 1px solid #333;
  transition: all 1s;
  position: relative;
  text-align: left;
}

.column .ac-title:hover {
  background-color: #ffc0cb;
}

.column .ac-title::before, .column .ac-title::after {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background-color: #333;
  position: absolute;
  top: 50%;
  right: 20px;
  transition: all 1s;
}

.column .ac-title::after {
  position: absolute;
  transform: rotate(90deg);
}

.column .ac-title.open {
  background-color: #ffc0cb;
}

.column .ac-title.open::before {
  transform: rotate(180deg);
}

.column .ac-title.open::after {
  transform: rotate(-270deg);
  opacity: 0;
}

.column .item {
  display: none;
  font-size: 1.2rem;
}

.column .item p {
  text-align: left;
  background-color: rgba(255, 192, 203, 0.05);
  padding: 40px;
  line-height: 3;
  border-bottom: 2px dotted #333;
}

.column .item p i {
  margin-right: 15px;
}

.column .item dl {
  padding: 40px 0;
  transition: all 1s;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  text-align: left;
}

.column .item dl dt {
  padding: 20px 30px;
  width: 50%;
  font-weight: bold;
}

.column .item dl dd {
  padding: 20px 30px;
  width: 50%;
  font-size: 2rem;
}

.column .item dl dd span {
  font-size: 1.2rem;
}

.comment {
  margin-top: 100px;
}

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
  .column .item dl {
    padding: 20px 0;
    flex-direction: column;
  }
  .column .item dl dt {
    padding: 10px 20px;
    width: 100%;
  }
  .column .item dl dd {
    padding: 10px 20px;
    width: 100%;
    margin-left: 10px;
  }
}

// アコーディオンメニューのac-ac-titleがクリックされた場合
  $(".ac-title").on("click", function() {
    // ac-titleクラスの次の要素.itemの表示・非表示を切り替える
    $(this).next().slideToggle();
    // ac-titleクラスにopenクラスを追加したり削除したりする
    // openクラスの追加、削除を行うことでラベルの「－」と「＋」の切り替えを行う
    $(this).toggleClass("open");
  });

コース内容

１．基本コース
2．標準コース
3．フルコース

1on1セッション

1ヶ月 12,000円/月

3ヶ月 11,000円/月

6ヶ月 10,000円/月

1on1セッションチャットの相談セッション報告書

1ヶ月 16,000円/月

3ヶ月 14,000円/月

6ヶ月 12,000円/月

1on1セッションチャットの相談セッション報告書面談対応

1ヶ月 30,000円/月

3ヶ月 25,000円/月

6ヶ月 20,000円/月

【クリック切り替え02 : タブ】

・PCは700px幅、スマホは全幅にしています。 ※PCの際、中身の要素が少ないのに全幅表示するとバランスが悪く見えます。 ——————————————————- ・tab_menuを探してtabsに代入 const tabs = document.getElementsByClassName(‘tab_menu’); ・tabsの個数を取得 for(let i = 0; i < tabs.length; i++){ ・tabsのi番目をクリックしたらタブスウィッチイベントをする tabs[i].addEventListener(‘click’,tabSwitch); } function tabSwitch(){ ・0番目のactiveクラスを削除 document.getElementsByClassName(‘active’)[0].classList.remove(‘active’); ・クリックされたタブにactiveクラスを付与 this.classList.add(‘active’); ・0番目のshowクラスを削除 document.getElementsByClassName(‘show’)[0].classList.remove(‘show’); ・tabsを並べる const arrayTabs = Array.prototype.slice.call(tabs); ・クリックされたtabをindexする（何番目） const index = arrayTabs.indexOf(this); ・indexされたtab_detailクラスにshowクラスを付与 document.getElementsByClassName(‘tab_detail’)[index].classList.add(‘show’); }; ——————————————————-

HTML

<h1 class="column-t">コース内容</h1>
<div class="column">
<ul class="tab">
  <li class="tab_menu active">１．基本コース</li>
  <li class="tab_menu">2．標準コース</li>
  <li class="tab_menu">3．フルコース</li>
</ul>
<div class="tab_detail show">
  <p class="check"><i class="fas fa-clipboard-check"></i> 1on1セッション</p>
  <div class="item-wrap">
    <div class="item">
      <p>1ヶ月</p>
      <p><span>12,000</span>円/月</p> 
    </div>
    <div class="item">
      <p>3ヶ月</p>
      <p><span>11,000</span>円/月</p>
    </div>
    <div class="item">
      <p>6ヶ月</p>
      <p><span>10,000</span>円/月</p>
    </div>
  </div>
</div>
<div class="tab_detail">
  <p class="check">
    <i class="fas fa-clipboard-check"></i> 1on1セッション<br>
    <i class="fas fa-clipboard-check"></i> チャットの相談<br>
    <i class="fas fa-clipboard-check"></i> セッション報告書
  </p>
  <div class="item-wrap">
    <div class="item">
      <p>1ヶ月</p>
      <p><span>16,000</span>円/月</p>
    </div>
    <div class="item">
      <p>3ヶ月</p>
      <p><span>14,000</span>円/月</p>
    </div>
    <div class="item">
      <p>6ヶ月</p>
      <p><span>12,000</span>円/月</p>
    </div>
  </div>
</div>
<div class="tab_detail">
  <p class="check">
    <i class="fas fa-clipboard-check"></i> 1on1セッション<br>
    <i class="fas fa-clipboard-check"></i> チャットの相談<br>
    <i class="fas fa-clipboard-check"></i> セッション報告書<br>
    <i class="fas fa-clipboard-check"></i> 面談対応
  </p>
  <div class="item-wrap">
    <div class="item">
      <p>1ヶ月</p>
      <p><span>30,000</span>円/月</p>
    </div>
    <div class="item">
      <p>3ヶ月</p>
      <p><span>25,000</span>円/月</p>
    </div>
    <div class="item">
      <p>6ヶ月</p>
      <p><span>20,000</span>円/月</p>
    </div>
  </div>
</div>
</div>

css

.column-t {
  font-size: 1.6rem;
  font-weight: bold;
  padding: 20px;
}
  .column {
  position: relative;
  font-size: 1.2rem;
  width: 700px;
  margin: 0 auto;
}

.column .tab {
  border-bottom: 3px solid #d5c5a5;
  display: flex;
  justify-content: space-around;
  padding: 0;
}

.column .tab_menu {
  width: calc(100% / 3);
  border-radius: 20px 20px 0 0;
  background-color: #ffc0cb;
  padding: 1.5rem;
  cursor: pointer;
  transition: .3s;
  font-weight: bold;
  background-color: rgba(255, 192, 203, 0.3);
}

.column .tab_menu.active {
  display: block;
  background-color: #ffc0cb;
}

.column .tab_detail {
  display: none;
  text-align: left;
  background-color: #ffc0cb;
  border-radius: 0 0 20px 20px;
  margin-top: -5px;
}

.column .tab_detail.show {
  display: block;
}

.column .tab_detail .check {
  line-height: 3;
  padding: 40px;
  border-bottom: 2px dotted #333;
  min-height: 320px;
}

.column .tab_detail .item-wrap {
  display: flex;
  justify-content: space-between;
}

.column .tab_detail .item {
  padding: 40px;
}

.column .tab_detail .item p span {
  font-size: 2rem;
}

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    font-size: 0.9rem;
  }
  .column .tab_detail .item-wrap {
    flex-direction: column;
    padding-bottom: 20px;
  }
  .column .tab_detail .check {
    min-height: 220px;
    padding: 20px 40px;
  }
  .column .tab_detail .item {
    padding: 20px 40px 0 40px;
  }
}

// tab_menuを探してtabsに代入
  const tabs = document.getElementsByClassName('tab_menu');
  // tabsの個数を取得
  for(let i = 0; i < tabs.length; i++){
  // tabsのi番目をクリックしたらタブスウィッチイベントをする
    tabs[i].addEventListener('click',tabSwitch);
  }
  function tabSwitch(){
    // 0番目のactiveクラスを削除
    document.getElementsByClassName('active')[0].classList.remove('active');
    // クリックされたタブにactiveクラスを付与
    this.classList.add('active');
    // 0番目のshowクラスを削除
    document.getElementsByClassName('show')[0].classList.remove('show');
    // tabsを並べる
    const arrayTabs = Array.prototype.slice.call(tabs);
    // クリックされたtabをindexする（何番目）
    const index = arrayTabs.indexOf(this);
    // indexされたtab_detailクラスにshowクラスを付与
    document.getElementsByClassName('tab_detail')[index].classList.add('show');
  };

新商品2022/1/10

テキストテキストテキストテキストテキストテキストテキストテキストテキスト！
動画2022/1/9

キストテキストテキストテキストテキストテキストテキストテキストテキスト！
コラム2022/1/8

テキストテキストテキストテキストテキストテキストテキストテキストテキスト！
その他2022/1/7

テキストテキストテキストテキストテキストテキストテキストテキストテキスト！
新商品2022/1/6

テキストテキストテキストテキストテキストテキストテキストテキストテキスト！

【クリック切り替え03 : チェックボックス】

・PC、スマホとも全幅にしています。 ——————————————————- ・0個以外の数字をnに代入 var n = !0; ・inputをクリックしたとき $(“input”).click(function() { ・inputにcheckedがついたもののidをひろいiに代入 var i = $(“input:checked”).attr(“id”); ・.sec-04 liのcssにdisplay:none;をつける $(“.sec-04 li”).css(“display”, “none”), ・.sec-04 liの中のあてはまるものにdisplay:block;をつける・→ checkedがついたinputのidと同じ要素をもつもの $(“.sec-04 li.” + i).css(“display”, “block”), ・0個以外または、selectの中のvalue属性がinputのidと同じ要素のもの n || $(“select”).val(i) }), ・変更する処理を与える $(“select”).change(function() { ・selectの中のvalue属性をiに代入 var i = $(this).val(); ・.sec-04 liの中のcssにdisplay:none;をつける $(“.sec-04 li”).css(“display”, “none”), ・.sec-04 liの中のあてはまるものにdisplay:block;をつける・→ selectのvalue属性と同じ要素をもつもの $(“.sec-04 li.” + i).css(“display”, “block”), ・.sec-04 labelの中身のデータを一括して処理 $(“.sec-04 label”).each(function() { ・labelのforの中身と同じで、・→ selectの中のvalue属性と同じ、かつ、0個ではない $(this).attr(“for”) == i && (n = !0, ・かつ、labelをクリックすると $(this).click(), ・nに0個以外の数字が入る(何かしら表示される) n = !0) }) }); ——————————————————-

HTML

<div class="column">
<label class="select">
  <select name="news" class="long">
    <option value="all" selected>すべて</option>
    <option value="category_news">新商品</option>
    <option value="category_movie">動画</option>
    <option value="category_column">コラム</option>
    <option value="category_other">その他</option>
  </select>
</label>
<div class="radio">
  <p class="title">新着ニュース</p>
  <input type="radio" name="news" class="radio_news" id="all" checked="">
  <label for="all" class="category_item" >すべて</label>
  <input type="radio" name="news" class="radio_news" id="category_news">
  <label for="category_news" class="category_item">新商品</label>
  <input type="radio" name="news" class="radio_news" id="category_movie">
  <label for="category_movie" class="category_item">動画</label>
  <input type="radio" name="news" class="radio_news" id="category_column">
  <label for="category_column" class="category_item">コラム</label>
  <input type="radio" name="news" class="radio_news" id="category_other">
  <label for="category_other" class="category_item">その他</label>
</div>
<ul>
  <li class="category_news all">
      <dl>
        <dt><span>新商品</span><time datetime="2022-1">2022/1/10</time</dt>
        <dd>テキストテキストテキストテキストテキストテキストテキストテキストテキスト！</dd>
      </dl>
  </li>
  <li class="category_movie all">
    <dl>
      <dt><span>動画</span><time datetime="2022-1">2022/1/9</time></dt>
      <dd>キストテキストテキストテキストテキストテキストテキストテキストテキスト！</dd>
    </dl>
  </li>
  <li class="category_column all">
    <dl>
      <dt><span>コラム</span><time datetime="2022-1">2022/1/8</time></dt>
      <dd>テキストテキストテキストテキストテキストテキストテキストテキストテキスト！</dd>
    </dl>
  </li>
  <li class="category_other all">
    <dl>
      <dt><span>その他</span><time datetime="2022-1">2022/1/7</time></dt>
      <dd>テキストテキストテキストテキストテキストテキストテキストテキストテキスト！</dd>
    </dl>
  </li>
  <li class="category_news all">
    <dl>
      <dt><span>新商品</span><time datetime="2022-1">2022/1/6</time></dt>
      <dd>テキストテキストテキストテキストテキストテキストテキストテキストテキスト！</dd>
    </dl>
  </li>
</ul>
</div>

css

.title {
  font-size: 1.6rem;
  margin-bottom: 30px;
}

.column {
  padding: 60px 4%;
  background-color: rgba(255, 192, 203, 0.3);
  margin: 0 auto;
  text-align: left;
}

.column .select {
  display: none;
}

.column .radio {
  margin-bottom: 30px;
}

.column .category_item {
  width: 15%;
  display: inline-block;
}

.column .all {
  font-size: 1.1rem;
  margin-bottom: 20px;
}

.column .all:last-child {
  margin-bottom: 0;
}

.column .all dt span {
  padding: 5px 10px;
  background-color: #ffc0cb;
  border-radius: 10px;
  font-size: 0.9rem;
  margin-right: 10px;
}

.column .all dd {
  margin-top: 5px;
}

.column .all li {
  margin-top: 10px;
}

.comment {
  margin-top: 100px;
}

  // 0個以外の数字をnに代入
var n = !0;
// inputをクリックしたとき
$("input").click(function() {
  // inputにcheckedがついたもののidをひろいiに代入
  var i = $("input:checked").attr("id");
  // .sec-04 liのcssにdisplay:none;をつける
  $(".sec-04 li").css("display", "none"),
  // .sec-04 liの中のあてはまるものにdisplay:block;をつける
  // → checkedがついたinputのidと同じ要素をもつもの
  $(".sec-04 li." + i).css("display", "block"),
  // 0個以外または、selectの中のvalue属性がinputのidと同じ要素のもの
  n || $("select").val(i)
}),
// 変更する処理を与える
$("select").change(function() {
  // selectの中のvalue属性をiに代入
    var i = $(this).val();
    // .sec-04 liの中のcssにdisplay:none;をつける
    $(".sec-04 li").css("display", "none"),
    // .sec-04 liの中のあてはまるものにdisplay:block;をつける
    // → selectのvalue属性と同じ要素をもつもの
    $(".sec-04 li." + i).css("display", "block"),
    // .sec-04 labelの中身のデータを一括して処理
    $(".sec-04 label").each(function() {
        // labelのforの中身と同じで、
        // → selectの中のvalue属性と同じ、かつ、0個ではない
        $(this).attr("for") == i && (n = !0,
          // かつ、labelをクリックすると
        $(this).click(),
        // nに0個以外の数字が入る(何かしら表示される)
        n = !0)
    })
});

TOPページへ戻る

js ｜ クリックして表示・非表示を切り替える

クリックして表示・非表示を切り替える

コース内容

コース内容

js ｜クリックして表示・非表示を切り替える