Mostra tag di div nascosto da un'altra pagina

Question

Sto cercando di collegarmi a una pagina FAQ all-inclusive da varie pagine. Le risposte sono contenute nei tag, nidificati all'interno di un elemento di linea di un elenco non ordinato ospitato per categorie.

La pagina FAQ ha le seguenti categorie:

1. Esame pratico infermiere
2. Rinnovo online
3. Ore di pratica

eccetera.

In base all'esame di infermiera pratica, ci sono secondarie, soggetti, con domande di seguito nei tag che si espandono. (ad es. Giorno dell'esame, risultati degli esami, ecc.)

Diciamo che sono su una pagina diversa chiamata Registrazione e c'è un link alle FAQ per i risultati degli esami.

Sono in grado di collegarsi alla pagina e ho incluso l'hashtag sull'ancora o sui risultati degli esami, ma non espande la sottocategoria.

ho letto questo Discussione ma non ha funzionato per me. Per favore aiuto! Il codice è di seguito:

<script type="text/javascript">
    function toggle(Info,pic) {
      var CState = document.getElementById(Info);
      CState.style.display = (CState.style.display != 'block') ? 'block' : 'none';
    }

    window.onload = function() {
        var hash = window.location.hash; // would be "#div1" or something
        if(hash != "") {
            var id = hash.substr(1); // get rid of #
            document.getElementById(id).style.display = 'block';
        }
    }

    </script>

<style type="text/css">
 .FAQ { cursor:hand; cursor:pointer; }
 .FAA { display:none;
        padding-left:20px;
        text-indent:-20px; }
 #FAQlist li { list-style-type: none; }
 #FAQlist ul { margin-left:0px; }
 headingOne{ font-family:Arial, Helvetica, sans-serif; color:#66BBFF; font-size:20px; font-weight:bold;}

</style>

Ecco il corpo (parte di esso comunque)

<headingOne class="FAQ" onClick="toggle('CPNRE', this)">PRACTICAL NURSE EXAM</headingOne>
<div class="FAA" id="CPNRE">
<h3><a name="applying">Applying to write the CPNRE</a></h3>
<ul id="FAQlist" style="width:450px;">
    <li class="FAQ">
        <p onclick="toggle('faq1',this)">
            <strong>Q: How much does it cost to write the exam?</strong></p>
        <div class="FAA" id="faq1">
      <b>A.</b> In 2013, the cost for the first exam writing is $600.00 which includes the interim license fee. See <a href="https://www.clpnbc.org/What-is-an-LPN/Becoming-an-LPN/Canadian-Practical-Nurse-Registration-Examination/Fees-and-Deadlines.aspx"> fee schedule</a>.</div>
        <hr />
    </li>

Ed ecco il corpo dell'altra pagina che contiene il collegamento e la stessa sintassi dello script della pagina FAQ all-inclusive. Questo è solo un test, non è esattamente quello che dirà:

<a onclick="toggle('CPNRE', this)" href="file:///S|/Designs/Web stuff/FAQ all inclusive.html#applying"> click here</a>

Answer 1

Se il Div che stai cercando di espandere è all'interno di altri Div che vengono crollati, dovrai espandere i Div del contenitore prima di espandere i Div per bambini affinché possano mostrare. Quindi devi almeno chiamare qualcosa come la funzione di attivatore nel codice di testa, ad esempio

window.onload = function() {
        var hash = window.location.hash; // would be "#div1" or something
        if(hash != "") {
            toggle('CPNRE', this);/*this is an example the CPNRE value needs to be figured out*/
            var id = hash.substr(1); // get rid of #
            document.getElementById(id).style.display = 'block';
        }
    }

Questa è all'incirca l'idea, non una soluzione completa poiché è necessario capire il Div del contenitore per chiamare il bosco o qualche altra funzione per espandersi.

MODIFICARE

Un modo per raggiungere ciò che stai cercando di fare, in puro JS, sarebbe quello di fare quanto segue,

if(hash != "") {
    var id = hash.substr(1); // get rid of #
    document.getElementById(id).style.display = 'block';   
    document.getElementById(id).parentNode.parentNode.parentNode.style.display = 'block';

    document.getElementById(id).parentNode.parentNode.style.display = 'block';

    document.getElementById(id).parentNode.style.display = 'block';

    document.getElementById(id).style.display='block';
}

Ma questo è legato al layout specifico che hai fornito nella tua domanda.

Una soluzione migliore, più generica, sarebbe quella di iterare i genitori fino a quando un genitore specifico non viene trovato in base al valore della classe, ad esempio

Html

/*add class value like faq-section to each div section */
<div class="FAA faq-section" id="faq1">

js

....
if(hash != "") {
  var id= hash.substr(1);
  var pNode = document.getElementById(id).parentNode;
  var endLoop=false;
  while(!endLoop){
    if(pNode.className&&pNode.className.indexOf('faq-section')!=-1){
      endLoop=true;
    };
    pNode.style.display='block';
    pNode=pNode.parentNode;
  }
  document.getElementById(id).style.display='block';
}