Mostrar etiqueta Div oculta de otra página

Question

Estoy tratando de vincular a una página de preguntas frecuentes con todo incluido desde varias páginas. Las respuestas están contenidas en etiquetas, anidadas dentro de una línea de línea de una lista desordenada ubicada por categorías.

La página de preguntas frecuentes tiene las siguientes categorías:

1. Examen práctico de enfermera
2. Renovación en línea
3. Horas de práctica

etc.

Bajo el examen práctico de enfermería, hay subcategorías, temas, con preguntas a continuación en etiquetas que se expanden en el cierre. (por ejemplo, día de examen, resultados del examen, etc.)

Digamos que estoy en una página diferente llamada Registro y hay un enlace a las preguntas frecuentes para los resultados del examen.

Puedo vincular a la página e incluir el hashtag en el ancla o los resultados del examen, pero no amplía la subcategoría.

he leído este Thread pero no funcionó para mí. ¡Por favor ayuda! El código está a continuación:

<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>

Aquí está el cuerpo (parte de eso de todos modos)

<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>

Y aquí está el cuerpo de la otra página que contiene el enlace y la misma sintaxis de script que la página de preguntas frecuentes con todo incluido. Esto es solo una prueba, eso no es exactamente lo que dirá:

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

Answer 1

Si el DIV que está tratando de expandir está dentro de otros Divs que están colapsados, tendrá que expandir los Divs de contenedores antes de expandir los Divs de los Niños para que se muestren. Por lo tanto, debe al menos llamar a algo como la función de alternar en el código principal, por ejemplo

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';
        }
    }

Esta es más o menos la idea, no una solución completa, ya que necesita descubrir el contenedor DIV para llamar alternar o alguna otra función para que se expanda.

EDITAR

Una forma de lograr lo que está tratando de hacer, en puro JS, sería hacer lo siguiente,

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';
}

Pero esto está relacionado con el diseño específico que ha proporcionado en su pregunta.

Una solución mejor y más genérica sería iterar a los padres hasta que se encuentre un padre específico en función del valor de la clase, por ejemplo

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';
}