テキスト検索の折りたたみセクションをすべて展開します

Question

折りたたみリストアイテムを含む既存のページがあります。問題は、誰かがページ上のテキストを検索しようとすると、現在折りたたまれているアイテムの検索結果が見つからないということです。私は検索しましたが、ブラウザーは折りたたまれたアイテムを検索できないようです。

回避策として、Ctrl + Fキープレスのリスナーを追加して、折りたたみアイテムをすべて開くことができたと考えました（もっと良い解決方法があれば教えてください）。これにより、テキストの検索が可能になります。私は（上記のコードを使用して）キー入力のためのリスナーを追加することができますが

window.addEventListener("keydown", function(e) { 
    if (e.keyCode === 114 || (e.ctrlKey && e.keyCode === 70)) { 
    document.getElementById('accordion1').click(); 
    //would like to make all accordians expand when Ctrl+F is pressed so that content can be searched 
    } 

、私はオープン崩壊のすべての要素を作成する方法を見つけ出すように見えることはできません。

私はこのページの元のコードを書きませんでした。私は、ページ全体を動作する別のコードで書き直すことができましたが、ライブページにはさらに多くのセクションがあり、すべてを書き直すのに何時間もかかるので、より単純なソリューションがあることを期待していました。私はページの簡略化した例を作成しました（小さなサンプルを作成するためにすべてのメインコンテンツを削除しました）。https://jsfiddle.net/felipeseiber/886p4eps/

Answer 1

私は何をすべきか考え出しました。 JSを次のように変更しただけです。

(function() { 
    var d = document, 
    accordionToggles = d.querySelectorAll('.js-accordionTrigger'), 
    setAria, 
    setAccordionAria, 
    switchAccordion, 
    touchSupported = ('ontouchstart' in window), 
    pointerSupported = ('pointerdown' in window); 
    skipClickDelay = function(e) { 
    e.preventDefault(); 
    e.target.click(); 
    } 

    setAriaAttr = function(el, ariaType, newProperty) { 
    el.setAttribute(ariaType, newProperty); 
    }; 

    setAccordionAria = function(el1, el2, expanded) { 
    switch (expanded) { 
     case "true": 
     setAriaAttr(el1, 'aria-expanded', 'true'); 
     setAriaAttr(el2, 'aria-hidden', 'false'); 
     break; 
     case "false": 
     setAriaAttr(el1, 'aria-expanded', 'false'); 
     setAriaAttr(el2, 'aria-hidden', 'true'); 
     break; 
     default: 
     break; 
    } 
    }; 

    switchAccordion = function(e) { 
    console.log("triggered"); 
    e.preventDefault(); 
    var thisAnswer = e.target.parentNode.nextElementSibling; 
    var thisQuestion = e.target; 
    if (thisAnswer.classList.contains('is-collapsed')) { 
     setAccordionAria(thisQuestion, thisAnswer, 'true'); 
    } else { 
     setAccordionAria(thisQuestion, thisAnswer, 'false'); 
    } 
    thisQuestion.classList.toggle('is-collapsed'); 
    thisQuestion.classList.toggle('is-expanded'); 
    thisAnswer.classList.toggle('is-collapsed'); 
    thisAnswer.classList.toggle('is-expanded'); 
    thisAnswer.classList.toggle('animateIn'); 
    }; 

    expandAccordion = function(target) { 
    console.log("triggered"); 
    var thisAnswer = target.parentNode.nextElementSibling; 
    var thisQuestion = target; 
    if (thisAnswer.classList.contains('is-collapsed')) { 
     setAccordionAria(thisQuestion, thisAnswer, 'true'); 
     thisQuestion.classList.toggle('is-collapsed'); 
     thisQuestion.classList.toggle('is-expanded'); 
     thisAnswer.classList.toggle('is-collapsed'); 
     thisAnswer.classList.toggle('is-expanded'); 
     thisAnswer.classList.toggle('animateIn'); 
    } 
    }; 

    for (var i = 0, len = accordionToggles.length; i < len; i++) { 
    if (touchSupported) { 
     accordionToggles[i].addEventListener('touchstart', skipClickDelay, false); 
    } 
    if (pointerSupported) { 
     accordionToggles[i].addEventListener('pointerdown', skipClickDelay, false); 
    } 
    accordionToggles[i].addEventListener('click', switchAccordion, false); 
    } 
})(); 

window.addEventListener("keydown", function(e) { 
    if (e.keyCode === 114 || (e.ctrlKey && e.keyCode === 70)) { 
    //document.getElementById('accordion1').click(); 
    //alert("Expand all collapsed sections for search"); 
    //would like to make all accordians expand when Ctrl+F is pressed so that content can be searched 
    var accordionToggles = document.querySelectorAll('.js-accordionTrigger'); 
    for (var i = 0, len = accordionToggles.length; i < len; i++) { 
      expandAccordion(accordionToggles[i]);  
    } 
    } 
}) 

他の回答がうまくいっている可能性もありますが、私が解決策を見つけてから自分で試してみることはできませんでした。

Answer 2

これはトリックを行う必要があります。コード内のコメント

window.addEventListener("keydown", function(e) { 
    if (e.keyCode === 114 || (e.ctrlKey && e.keyCode === 70)) { 
    // Store all accordion trigger elements 
    var d = document, 
    accordionToggles = d.querySelectorAll('.js-accordionTrigger'); 
    // loop through all accordion trigger elements 
    for (var i = 0, len = accordionToggles.length; i < len; i++) { 
     // store the current iterated accordion tigger element and content 
     var thisAnswer = accordionToggles[i].parentNode.nextElementSibling; 
     var thisQuestion = accordionToggles[i]; 
     // check if current iterated accordion content has a class of "is-collapsed". 
     if (thisAnswer.classList.contains('is-collapsed')) { 
     // toggle current iterated accordion trigger and content classes if condition is met 
     thisQuestion.classList.toggle('is-collapsed'); 
     thisQuestion.classList.toggle('is-expanded'); 
     thisAnswer.classList.toggle('is-collapsed'); 
     thisAnswer.classList.toggle('is-expanded'); 
     thisAnswer.classList.toggle('animateIn'); 
     } 
    } 
    } 
})