

アコーディオンメニューでメニューを開閉の設定をしていますが、入力している項目だけ開いた状態にし、  
他のメニューは閉じた状態にするにはどうすればいいでしょうか。

<http://www.dataplan.jp/blog/css/3127>  
ここのサイトを参考にして作りたいのですが、

[code]

    <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>＋、－切り替え</dd>
            <dt class="clearfix">
                <div class="title">
                    <p>＋、－切り替え</p>
                </div>
                <p class="accordion_icon"><span></span><span></span></p>
            </dt>
            <dd>＋、－切り替え</dd>
        </dl>
    </div>
    
[/code]

JS

[code]

    $(function(){
        $(".accordionbox dt").on("click", function() {
            $(this).next().slideToggle();   
            // activeが存在する場合
            if ($(this).children(".accordion_icon").hasClass('active')) {           
                // activeを削除
                $(this).children(".accordion_icon").removeClass('active');              
            }
            else {
                // activeを追加
                $(this).children(".accordion_icon").addClass('active');         
            }           
        });
    });
    
[/code]

CSS

[code]

    .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);
    }
    
[/code]

[code]

    <dd>＋、－切り替え</dd>
    
[/code]

ddで囲んだ部分に、  
ここの部分にcheckboxにチェック済みや  
inputの入力画面で入力済みの場合、  
だと開いている状態にするにはどうすればよいのでしょうか。


CC BY-SA 4.0
2019-01-31T06:52:42.260
52446
2019-08-05T22:01:35.560
2019-01-31T14:58:44.013
2376
25636
question
javascript html css
アコーディオンメニューで入力しているとき項目のみ開いた状態にする


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

以下は実装例です。

[code]

    $(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;
    }
[/code]

[code]

    .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);
    }
[/code]

[code]

    <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>
[/code]


CC BY-SA 4.0
2019-02-04T13:18:17.940
52543
2019-02-06T10:11:50.957
2019-02-06T10:11:50.957
31716
31716
52446
answer