Home/ Questions/Q 6951479
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T14:13:30+00:00

I have an FAQ page that looks like the markup shown below When the

  • 0

I have an FAQ page that looks like the markup shown below

When the page loads I’d like to reveal the answer that corresponds to the bookmark in the URL

The url will be of the form http://www.mydomain.com/page#q1

I am trying to do it like this but it wont’t work – any ideas how to fix it?

console.log($(hash).length)

does have a length of 1 so it is selecting a dom element

And I have used the same functionality to reveal it on click further down the script – and tht works OK

$(function () {

        var hash = window.location.hash;
        //hash = hash.replace('#', '');
        console.log('hash:' + hash);
        console.log($(hash).length);

        $(hash)
            .parent()
            .parent()
            .find("dd.answer")
            .slideToggle();

        $("dd.answer")
                .hide();

        $("dt.question")
                .click(function () {
                    $(this)
                        .parent()
                        .find("dd.answer")
                        .slideToggle();
                });
    });

<dl>
    <dt class="question">
        <a id="q1"></a>
        Question 1
    <dd class="answer" style="display: none;">
        Answer 1
    </dd>
</dl>
<dl>
    <dt class="question">
        <a id="q2"></a>
        Question 2
    <dd class="answer" style="display: none;">
        Answer 2
    </dd>
</dl>
<dl>
    <dt class="question">
        <a id="q3"></a>
        Question 3
    <dd class="answer" style="display: none;">
        Answer 3
    </dd>
</dl>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    you were hiding the dds after revealing using the hash.

    try this instead:

    <html>

    <head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script>
    $(function () {

        var hash = window.location.hash;
        //hash = hash.replace('#', '');
        console.log('hash:' + hash);
        console.log($(hash).length);

        $('dd').hide();

        $(hash).parents('dl').find('dd').slideToggle()

        $("dt.question")
                .click(function () {
            $(this)
                        .parent()
                        .find("dd.answer")
                        .slideToggle();
        });
    });

</script>
</head>

<body>

<dl>
    <dt class="question">
        <a id="q1"></a>
        Question 1
    <dd class="answer" >
        Answer 1
    </dd>
</dl>
<dl>
    <dt class="question">
        <a id="q2"></a>
        Question 2
    <dd class="answer" >
        Answer 2
    </dd>
</dl>
<dl>
    <dt class="question">
        <a id="q3"></a>
        Question 3
    <dd class="answer" >
        Answer 3
    </dd>
</dl>

</body>

</html>
    • 0