Browsing to the target FAQ topic

I'm not sure how I'm going to explain this but I'll try my best...

I have the FAQ stored in the database and I'm outputting them to the view. They are organized by top-level topics and sub-topics (which are the actual questions). When the FAQ page first renders, only the top-level FAQ's are visible. When the user clicks on one of them, its children show up below it (slide effect). Then when the user clicks on the question, the answer shows up.

I have many links scattered in the website which point to certain topics in the FAQ. I need to be able to redirect to that specific question and it should show up with its answer as well. I tried /FAQ#id-of-question but that only directed to the FAQ page and the question & its answer did not show up... So is there anything I can do to make that work?

Here's my code:

<div id="faqPageWrapper">
    <ul id="faqTopLevel">
        @foreach (var parent in Model.Parents)
        {
            <li class="faqParentNode">
                <h3 id="@string.Format("parentFAQ-{0}", parent.Id)" class="faqParentTitle">@parent.Title <span class="arrowIcon downArrow"></span></h3>
                <ul class="faqChildLevel">
                    @foreach (var child in parent.Children)
                    {
                        <li class="faqChildNode">
                            <h3 id="@string.Format("topic-{0}", child.Id)" class="faqChildTitle">@child.Title <span class="arrowIcon upArrow"></span></h3>
                            <p class="faqChildText" style="display:none;">@child.Text</p>
                        </li>
                    }   
                </ul>
            </li>
        }
    </ul>
</div>


<script type="text/javascript">
    $(function () {
        var topLevelLink = $('.faqParentTitle');
        topLevelLink.click(function () {
            var child = $(this).parent().find('ul.faqChildLevel');
            child.slideToggle();
            $('.arrowIcon', topLevelLink).toggleClass('upArrow');

            var questions = child.find('.faqChildTitle').click(function () {
                $(this).parent().find('p.faqChildText').toggle();
                $(this).find('.arrowIcon').toggle();
            });
        });
    });
</script>

And this is the CSS applied to it (using the .LESS library):

#faqPageWrapper
{ width:680px; position:relative; top:80px; display:block; .arrowIcon { display:none; }
  li.faqParentNode { position:relative; width:100%; min-height:25px; background:rgba(255,255,255, 0.6); filter:alpha(opacity=60); .rounded_corners(5px); 
                    .box_shadow(3px); margin-bottom:20px; padding:25px; 
                    .faqParentTitle { font-size:42px; color:@darkPurple; text-decoration:none; cursor:pointer; position:relative; top:0; left:25px; height:50px; display:block;}
                    .faqParentTitle:hover { text-decoration:underline; .arrowIcon { display:inline-block; } }
                    }

   .faqChildLevel { position:relative; display:block; left:80px; display:none; width:90%; margin-top:15px;
                    li { margin-bottom: 15px; h3 { color:@mainGreen; font-size:16px; text-decoration:underline; cursor:pointer; font-weight:bold; }  }
                    p { padding:20px; background-color:@lightBrown; font-size:12px; color:Blac开发者_如何学Ck; margin-top:10px; position:relative; left:10px; width:90%; }
                    }
}

All you need to do is amend your click logic to work on page load, and read the fragment from the URL to determine which question should be expanded by default.

Something like this:

HTML

<div id="faqPageWrapper">
    <ul id="faqTopLevel">
        @foreach (var parent in Model.Parents)
        {
            <li class="faqParentNode" id="@uniqueID">
                ...
            </li>
        }
    </ul>
</div>

jQuery

<script type="text/javascript">
    $(function () {
        // On load
        if (window.location.hash && $("LI" + window.location.hash").length != 0) {
            var activeQuestion = $("LI" + window.location.hash");
            showChildrenOf(activeQuestion);
        }

        // On click
        var topLevelLink = $('.faqParentTitle');
        topLevelLink.click(function () {    
            showChildrenOf(this);
        });
    });

    function showChildrenOf(element) {
        var child = $(element).parent().find('ul.faqChildLevel');
        child.slideToggle();
        $('.arrowIcon', topLevelLink).toggleClass('upArrow');

        var questions = child.find('.faqChildTitle').click(function () {
            $(this).parent().find('p.faqChildText').toggle();
            $(this).find('.arrowIcon').toggle();
        }); 
    };
</script>