Afficher la balise div cachée d'une autre page

Question

J'essaie de créer un lien vers une page FAQ tout compris à partir de différentes pages. Les réponses sont contenues dans les balises, imbriquées dans un élément de ligne d'une liste non ordonnée hébergée par les catégories.

La page FAQ a les catégories suivantes:

1. Examen d'infirmière pratique
2. Renouvellement en ligne
3. Des heures de pratique

etc.

Sous l'examen de l'infirmière pratique, il y a des sous-catégories, des sujets, avec des questions ci-dessous dans des balises qui développent onclick. (Par exemple, le jour de l'examen, les résultats de l'examen, etc.)

Disons que je suis sur une autre page appelée inscription et qu'il y a un lien vers la FAQ pour les résultats de l'examen.

Je suis en mesure de créer un lien vers la page et d'inclure le hashtag sur les résultats de l'ancre ou de l'examen, mais il n'étend pas la sous-catégorie.

j'ai lu cette Sujet mais cela n'a pas fonctionné pour moi. Aidez-vous! Le code est ci-dessous:

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

Voici le corps (partie de lui de toute façon)

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

Et voici le corps de l'autre page qui contient le lien et la même syntaxe de script que la page FAQ tout compris. C'est juste un test, ce n'est pas exactement ce qu'il dira:

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

Answer 1

Si le div que vous essayez de développer se trouve dans d'autres divs qui sont effondrés, vous devrez étendre les divs de conteneurs avant d'élargir les divs des enfants pour qu'ils le montrent. Vous devez donc au moins appeler quelque chose comme la fonction de bascule dans le code de tête, par exemple

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

Il s'agit à peu près de l'idée et non d'une solution complète, car vous devez déterminer le div de conteneur pour appeler la bascule ou une autre fonction pour qu'il se dilate.

ÉDITER

Une façon de réaliser ce que vous essayez de faire, en JS pure, serait de faire ce qui suit,

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

Mais cela est lié à la mise en page spécifique que vous avez fournie dans votre question.

Une solution meilleure et plus générique serait d'itérer les parents jusqu'à ce qu'un parent spécifique soit trouvé en fonction de la valeur de la classe, par exemple

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