3

My website has a FAQ page that, by default, shows only the questions, not the answers, to prevent clutter (there may be better ways, feel free to make suggestions).

To see an answer, the user has to click on the question, which then will fold open the answer. This is done browser-side, with Javascript and jQuery, like this:

<script type="text/javascript" >
    $(document).ready(function(){
        $(".trigger").click(function(){
            $(this).toggleClass("active").next().slideToggle("fast");
        });
    });
</script>

The questions are declared with the "trigger" CSS class.

Now, I link to the FAQ questions from other pages, using anchors. This will scroll the page to the question but does not reveal the answer automatically.

I like to reveal the answer when the user clicks on an anchored link to a FAQ question.

How can I accomplish this? Preferably without server-side (php) code, but if that's necessary, I can do that as well.

Here's an example link to my page:

http://apps.tempel.org/FindAnyFile/support.php#catsearch

Thomas Tempelmann
  • 11,045
  • 8
  • 74
  • 149

2 Answers2

3

You can check in javascript after the page is loaded whether the url has an anchor target, and if so, look up your anchor by that, simulating a click. If you know what you want to do there may be a more direct approach to twirling it open rather than sending doing the click.

I see you have jQuery included and already have a .ready so I would add this to it:

$(document).ready(function() {
    if(window.location.hash != '') {
        $(window.location.hash).click();
    }
})
Patrick Fay
  • 552
  • 3
  • 15
  • Huh, this does not work if the link is on the same page as the anchor, e.g. when I have ` – Thomas Tempelmann Apr 07 '19 at 09:51
  • Does adding an equivalent window load check do it? (Not sure if this triggers twice in some circumstances) ```$(window).load(function() { if(window.location.hash != '') { $(window.location.hash).click(); } })``` I was looking at this answer: https://stackoverflow.com/a/12403504/2149955 – Patrick Fay Apr 07 '19 at 10:13
  • 1
    Solved it: Add `$('a[href^="\\#"]').click(function() { $(this.hash).addClass("active").next().slideDown("fast"); });` to the ready() event. See https://stackoverflow.com/a/8683147/43615 – Thomas Tempelmann Apr 07 '19 at 10:41
2

When you want to show the answer, you can add a query string parameter, which your support.php checks on pageload. If there is such a parameter, find the ID in the URL and call whatever function can show the answer.

For example, link to

http://apps.tempel.org/FindAnyFile/support.php?showanswer=true#catsearch

and then, on pageload:

const urlParams = new URLSearchParams(window.location.search);
const showAnswer = urlParams.has('showanswer');
if (showAnswer) {
  $('#' + window.hash).toggleClass("active").next().slideToggle("fast");
}
CertainPerformance
  • 356,069
  • 52
  • 309
  • 320
  • I would not need "=true", though, as I could just test for the args existence, right? Also, my code does not use pageLoad currently. Gotta figure that out. – Thomas Tempelmann Apr 07 '19 at 09:14
  • Sure, you could put any value there. Your script is already running on pageload - just put this inside your`ready` handler – CertainPerformance Apr 07 '19 at 09:14
  • I mean no value, like "?showanswer#anchor". For pageload, you mean the .load() event? – Thomas Tempelmann Apr 07 '19 at 09:15
  • 1
    No value? Possible, but sometimes [not a great idea](https://stackoverflow.com/questions/4557387/is-a-url-query-parameter-valid-if-it-has-no-value). If you do that, use `.has` instead of `.get` – CertainPerformance Apr 07 '19 at 09:18
  • You're already using `$(document).ready(function(){`, but you don't even need it in this case, since jQuery is defined at the top anyway. – CertainPerformance Apr 07 '19 at 09:19
  • To handle links to anchors on the same page, if you want them to be shown immediately too, create a function that, when called with an ID, selects that element and calls `toggleClass` and such. Then you can call that function on pageload with `window.hash`, and also call it when the [hashchange](https://developer.mozilla.org/en/docs/Web/API/WindowEventHandlers/onhashchange) event fires – CertainPerformance Apr 07 '19 at 13:00