Skip to main content
特定のラジオボタンをチェックしているときに閉じる実装を追記しました。
ソース リンク
wata
  • 301
  • 1
  • 7
$(function() {
  // 初期開閉状態設定
  $(".accordionbox dt")
    .filter((i, e) => isActive($(e).next()))
    .each((i, e) => toggle($(e)));

  $(".accordionbox dt").on("click", function() {
    toggle($(this));
  });
});

function toggle($dt) {
  $dt.next().slideToggle();
  // activeが存在する場合
  if ($dt.children(".accordion_icon").hasClass('active')) {
    // activeを削除
    $dt.children(".accordion_icon").removeClass('active');
  } else {
    // activeを追加
    $dt.children(".accordion_icon").addClass('active');
  }
}

// 初期開閉状態の判定
function isActive($dd) {
  // 特定のラジオボタンをチェックしているか
  if ($dd.find('input[type="radio"].close:checked').length)
    return false;
  // チェックボックスをチェックしているか
  if ($dd.find('input[type="checkbox"]:checked').length)
    return true;
  // テキストボックスに入力があるか
  if ($dd.find('input[type="text"]').filter((i, e) => $(e).val()).length)
    return true;
  return false;
}
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

.accordionbox {
  width: 50%;
  background: #FBDBC4;
  margin: 10px auto 40px;
  padding: 20px;
}

.accordionlist dt {
  display: block;
  background: #fff;
  padding: 20px 0 10px 5px;
  border-top: 1px solid #DFDFDF;
}

.accordionlist dt:first-child {
  border-top: none !important;
}

.accordionlist dt .title {
  padding-left: 10px;
  float: left;
}

.accordionlist dd {
  display: none;
  background: #fff;
  padding: 0 0 20px 15px;
}

.accordion_icon,
.accordion_icon span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}

.accordion_icon {
  position: relative;
  width: 30px;
  height: 30px;
  float: right;
  margin-right: 5px;
}

.accordion_icon span {
  position: absolute;
  left: 6px;
  width: 50%;
  height: 2px;
  background-color: #F88789;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -ms-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
}

.accordion_icon span:nth-of-type(1) {
  top: 5px;
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
}

.accordion_icon span:nth-of-type(2) {
  top: 5px;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}


/*+、-切り替え*/

.accordion_icon.active span:nth-of-type(1) {
  display: none;
}

.accordion_icon.active span:nth-of-type(2) {
  top: 5px;
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="accordion" class="accordionbox">
  <dl class="accordionlist">
    <dt class="clearfix">
      <div class="title">
        <p>;+、-切り替え;チェック済</p>
      </div>
      <p class="accordion_icon"><span></span><span></span></p>
    </dt>
    <dd><input type="checkbox" checked="checked" /></dd>
    <dt class="clearfix">
      <div class="title">
        <p>;+、-切り替え;未チェック</p>
      </div>
      <p class="accordion_icon"><span></span><span></span></p>
    </dt>
    <dd><input type="checkbox" /></dd>
    <dt class="clearfix">
      <div class="title">
        <p>;+、-切り替え;入力済</p>
      </div>
      <p class="accordion_icon"><span></span><span></span></p>
    </dt>
    <dd><input type="text" value="hoge" /></dd>
    <dt class="clearfix">
      <div class="title">
        <p>;+、-切り替え;未入力</p>
      </div>
      <p class="accordion_icon"><span></span><span></span></p>
    </dt>
    <dd><input type="text" /></dd>
    <dt class="clearfix">
      <div class="title">
        <p>特定のラジオボタンチェック済</p>
      </div>
      <p class="accordion_icon"><span></span><span></span></p>
    </dt>
    <dd><input type="radio" class="close" checked="checked" /><input type="text" value="hoge" /></dd>
    <;dt class="clearfix">;
      <div class="title">
        <p>特定のラジオボタン未チェック</p>
      </div>
      <p class="accordion_icon"><span></span><span></span></p>
    </dt>
    <dd><input type="radio" class="close" /><input type="text" value="hoge" /></dd>
  </dl>
</div>
$(function() {
  // 初期開閉状態設定
  $(".accordionbox dt")
    .filter((i, e) => isActive($(e).next()))
    .each((i, e) => toggle($(e)));

  $(".accordionbox dt").on("click", function() {
    toggle($(this));
  });
});

function toggle($dt) {
  $dt.next().slideToggle();
  // activeが存在する場合
  if ($dt.children(".accordion_icon").hasClass('active')) {
    // activeを削除
    $dt.children(".accordion_icon").removeClass('active');
  } else {
    // activeを追加
    $dt.children(".accordion_icon").addClass('active');
  }
}

// 初期開閉状態の判定
function isActive($dd) {
  // チェックボックスをチェックしているか
  if ($dd.find('input[type="checkbox"]:checked').length)
    return true;
  // テキストボックスに入力があるか
  if ($dd.find('input[type="text"]').filter((i, e) => $(e).val()).length)
    return true;
  return false;
}
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

.accordionbox {
  width: 50%;
  background: #FBDBC4;
  margin: 10px auto 40px;
  padding: 20px;
}

.accordionlist dt {
  display: block;
  background: #fff;
  padding: 20px 0 10px 5px;
  border-top: 1px solid #DFDFDF;
}

.accordionlist dt:first-child {
  border-top: none !important;
}

.accordionlist dt .title {
  padding-left: 10px;
  float: left;
}

.accordionlist dd {
  display: none;
  background: #fff;
  padding: 0 0 20px 15px;
}

.accordion_icon,
.accordion_icon span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}

.accordion_icon {
  position: relative;
  width: 30px;
  height: 30px;
  float: right;
  margin-right: 5px;
}

.accordion_icon span {
  position: absolute;
  left: 6px;
  width: 50%;
  height: 2px;
  background-color: #F88789;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -ms-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
}

.accordion_icon span:nth-of-type(1) {
  top: 5px;
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
}

.accordion_icon span:nth-of-type(2) {
  top: 5px;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}


/*+、-切り替え*/

.accordion_icon.active span:nth-of-type(1) {
  display: none;
}

.accordion_icon.active span:nth-of-type(2) {
  top: 5px;
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="accordion" class="accordionbox">
  <dl class="accordionlist">
    <dt class="clearfix">
      <div class="title">
        <p>;+、-切り替え</p>
      </div>
      <p class="accordion_icon"><span></span><span></span></p>
    </dt>
    <dd><input type="checkbox" checked="checked" /></dd>
    <dt class="clearfix">
      <div class="title">
        <p>;+、-切り替え</p>
      </div>
      <p class="accordion_icon"><span></span><span></span></p>
    </dt>
    <dd><input type="checkbox" /></dd>
    <dt class="clearfix">
      <div class="title">
        <p>;+、-切り替え</p>
      </div>
      <p class="accordion_icon"><span></span><span></span></p>
    </dt>
    <dd><input type="text" value="hoge" /></dd>
    <dt class="clearfix">
      <div class="title">
        <p>;+、-切り替え</p>
      </div>
      <p class="accordion_icon"><span></span><span></span></p>
    </dt>
    <dd><input type="text" /></dd>
  </dl>
</div>
$(function() {
  // 初期開閉状態設定
  $(".accordionbox dt")
    .filter((i, e) => isActive($(e).next()))
    .each((i, e) => toggle($(e)));

  $(".accordionbox dt").on("click", function() {
    toggle($(this));
  });
});

function toggle($dt) {
  $dt.next().slideToggle();
  // activeが存在する場合
  if ($dt.children(".accordion_icon").hasClass('active')) {
    // activeを削除
    $dt.children(".accordion_icon").removeClass('active');
  } else {
    // activeを追加
    $dt.children(".accordion_icon").addClass('active');
  }
}

// 初期開閉状態の判定
function isActive($dd) {
  // 特定のラジオボタンをチェックしているか
  if ($dd.find('input[type="radio"].close:checked').length)
    return false;
  // チェックボックスをチェックしているか
  if ($dd.find('input[type="checkbox"]:checked').length)
    return true;
  // テキストボックスに入力があるか
  if ($dd.find('input[type="text"]').filter((i, e) => $(e).val()).length)
    return true;
  return false;
}
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

.accordionbox {
  width: 50%;
  background: #FBDBC4;
  margin: 10px auto 40px;
  padding: 20px;
}

.accordionlist dt {
  display: block;
  background: #fff;
  padding: 20px 0 10px 5px;
  border-top: 1px solid #DFDFDF;
}

.accordionlist dt:first-child {
  border-top: none !important;
}

.accordionlist dt .title {
  padding-left: 10px;
  float: left;
}

.accordionlist dd {
  display: none;
  background: #fff;
  padding: 0 0 20px 15px;
}

.accordion_icon,
.accordion_icon span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}

.accordion_icon {
  position: relative;
  width: 30px;
  height: 30px;
  float: right;
  margin-right: 5px;
}

.accordion_icon span {
  position: absolute;
  left: 6px;
  width: 50%;
  height: 2px;
  background-color: #F88789;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -ms-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
}

.accordion_icon span:nth-of-type(1) {
  top: 5px;
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
}

.accordion_icon span:nth-of-type(2) {
  top: 5px;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}


/*+、-切り替え*/

.accordion_icon.active span:nth-of-type(1) {
  display: none;
}

.accordion_icon.active span:nth-of-type(2) {
  top: 5px;
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="accordion" class="accordionbox">
  <dl class="accordionlist">
    <dt class="clearfix">
      <div class="title">
        <p>;チェック済</p>
      </div>
      <p class="accordion_icon"><span></span><span></span></p>
    </dt>
    <dd><input type="checkbox" checked="checked" /></dd>
    <dt class="clearfix">
      <div class="title">
        <p>;未チェック</p>
      </div>
      <p class="accordion_icon"><span></span><span></span></p>
    </dt>
    <dd><input type="checkbox" /></dd>
    <dt class="clearfix">
      <div class="title">
        <p>;入力済</p>
      </div>
      <p class="accordion_icon"><span></span><span></span></p>
    </dt>
    <dd><input type="text" value="hoge" /></dd>
    <dt class="clearfix">
      <div class="title">
        <p>;未入力</p>
      </div>
      <p class="accordion_icon"><span></span><span></span></p>
    </dt>
    <dd><input type="text" /></dd>
    <dt class="clearfix">
      <div class="title">
        <p>特定のラジオボタンチェック済</p>
      </div>
      <p class="accordion_icon"><span></span><span></span></p>
    </dt>
    <dd><input type="radio" class="close" checked="checked" /><input type="text" value="hoge" /></dd>
    <;dt class="clearfix">;
      <div class="title">
        <p>特定のラジオボタン未チェック</p>
      </div>
      <p class="accordion_icon"><span></span><span></span></p>
    </dt>
    <dd><input type="radio" class="close" /><input type="text" value="hoge" /></dd>
  </dl>
</div>
ソース リンク
wata
  • 301
  • 1
  • 7

メニュー項目に対し開いた状態にしたい条件でフィルタをかけて、クリック時の表示制御と同様のことをする流れになると思います。

以下は実装例です。

$(function() {
  // 初期開閉状態設定
  $(".accordionbox dt")
    .filter((i, e) => isActive($(e).next()))
    .each((i, e) => toggle($(e)));

  $(".accordionbox dt").on("click", function() {
    toggle($(this));
  });
});

function toggle($dt) {
  $dt.next().slideToggle();
  // activeが存在する場合
  if ($dt.children(".accordion_icon").hasClass('active')) {
    // activeを削除
    $dt.children(".accordion_icon").removeClass('active');
  } else {
    // activeを追加
    $dt.children(".accordion_icon").addClass('active');
  }
}

// 初期開閉状態の判定
function isActive($dd) {
  // チェックボックスをチェックしているか
  if ($dd.find('input[type="checkbox"]:checked').length)
    return true;
  // テキストボックスに入力があるか
  if ($dd.find('input[type="text"]').filter((i, e) => $(e).val()).length)
    return true;
  return false;
}
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

.accordionbox {
  width: 50%;
  background: #FBDBC4;
  margin: 10px auto 40px;
  padding: 20px;
}

.accordionlist dt {
  display: block;
  background: #fff;
  padding: 20px 0 10px 5px;
  border-top: 1px solid #DFDFDF;
}

.accordionlist dt:first-child {
  border-top: none !important;
}

.accordionlist dt .title {
  padding-left: 10px;
  float: left;
}

.accordionlist dd {
  display: none;
  background: #fff;
  padding: 0 0 20px 15px;
}

.accordion_icon,
.accordion_icon span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}

.accordion_icon {
  position: relative;
  width: 30px;
  height: 30px;
  float: right;
  margin-right: 5px;
}

.accordion_icon span {
  position: absolute;
  left: 6px;
  width: 50%;
  height: 2px;
  background-color: #F88789;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -ms-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
}

.accordion_icon span:nth-of-type(1) {
  top: 5px;
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
}

.accordion_icon span:nth-of-type(2) {
  top: 5px;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}


/*+、-切り替え*/

.accordion_icon.active span:nth-of-type(1) {
  display: none;
}

.accordion_icon.active span:nth-of-type(2) {
  top: 5px;
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="accordion" class="accordionbox">
  <dl class="accordionlist">
    <dt class="clearfix">
      <div class="title">
        <p>+、-切り替え</p>
      </div>
      <p class="accordion_icon"><span></span><span></span></p>
    </dt>
    <dd><input type="checkbox" checked="checked" /></dd>
    <dt class="clearfix">
      <div class="title">
        <p>+、-切り替え</p>
      </div>
      <p class="accordion_icon"><span></span><span></span></p>
    </dt>
    <dd><input type="checkbox" /></dd>
    <dt class="clearfix">
      <div class="title">
        <p>+、-切り替え</p>
      </div>
      <p class="accordion_icon"><span></span><span></span></p>
    </dt>
    <dd><input type="text" value="hoge" /></dd>
    <dt class="clearfix">
      <div class="title">
        <p>+、-切り替え</p>
      </div>
      <p class="accordion_icon"><span></span><span></span></p>
    </dt>
    <dd><input type="text" /></dd>
  </dl>
</div>