メニュー項目に対し開いた状態にしたい条件でフィルタをかけて、クリック時の表示制御と同様のことをする流れになると思います。 以下は実装例です。 <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> $(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; } <!-- language: lang-css --> .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); } <!-- language: lang-html --> <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> <!-- end snippet -->