show hidden div tag from another page

Posted by neueweblernen on Stack Overflow See other posts from Stack Overflow or by neueweblernen
Published on 2013-11-07T21:37:29Z Indexed on 2013/11/07 21:54 UTC
Read the original article Hit count: 152

Filed under:
|
|
|
|

I'm trying to link to an all-inclusive FAQ page from various pages. The answers are contained in tags, nested within a line item of an unordered list housed by categories.

The FAQ page has the following categories:

  1. Practical Nurse Exam
  2. Online Renewal
  3. Practice Hours

etc.

Under Practical Nurse Exam, there are sub categories, subjects, with questions below in tags that expand onClick. (e.g. Examination Day, Exam Results, etc.)

Let's say I'm on a different page called Registration and there's a link to the FAQs for Exam Results.

I'm able to link to the page and included the hashtag on the anchor or Exam Results, but it does not expand the subcategory.

I've read this thread but it didn't work for me. Please help! The code is below:

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

Here's the body (part of it anyway)

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

and here's the body of the other page that contains the link and the same script syntax as the all-inclusive FAQ page. This is just a test, that's not exactly what it will say:

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

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about html