on click, go to another page and open a hidden div

Question

I have an FAQ page with all questions in a list. The list only shows the questions. The answers are hidden and slide down when you click on a question.

On other pages there are links to these questions. I need them to open the FAQ page and directly show the answer as well.

I suppose this has something to do with location/targeting, but don't really know how to solve it.

This is the HTML on the FAQ page

<ul> 
   <li class="#faq1">
      <h1 class="question">
         This is were the question goes.
      </h1>

      <div class="answer">
          This is were the answer goes, only showing when clicking the question or a link on another page linked to this question.
      </div>
   </li>
</ul>

This is the jQuery

jQuery(document).ready(function() {
  $(".answer").hide();

  $(".question").click(function()
  {
    $(this).next(".answer").slideToggle(500);
  });
});

On some other pages I use normal links. When clicking the link, it obviously opens the FAQ page, but it does not toggle the answer.

<a href="faq">This is were the question goes</a>

What can I do to trigger the slideToggle from another page?

Pass a hashtag in the URL, [grab it with jQuery](https://stackoverflow.com/questions/1822598/getting-url-hash-location-and-using-it-in-jquery), and use it to determine which section to open. — random_user_name, Jan 21 '19 at 21:39

score 0 · Accepted Answer · answered Jan 21 '19 at 22:05

You can pass the answer to display in the hash of the URL.

Change the HTML to include a unique id for each answer tag.

<ul> 
   <li class="#faq1">
      <h1 class="question">
         This is were the question goes.
      </h1>

      <div class="answer" id="answer1">
          This is were the answer goes, only showing when clicking the question or a link on another page linked to this question.
      </div>
   </li>
</ul>

Change the Javascript so that it picks up any hash and shows that answer.

jQuery(document).ready(function() {
  $(".answer").hide();

  // show the target answer
  if (window.location.hash)
    $(location.hash).slideToggle(500);

  $(".question").click(function()
  {
    $(this).next(".answer").slideToggle(500);
  });
});

Change the href of the source link on the other page to include the id of the answer you want to display as the hash.

<a href="faq#answer1">This is were the question goes</a>

Worked perfectly! Thanks a lot. – sjeml Jan 23 '19 at 21:45 — sjeml, Jan 23 '19 at 21:45

score -2 · Answer 2 · answered Jan 21 '19 at 22:09

If you are set to use client side processing for this here's a solution

function GetURLParameter(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++)
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam)
        {
            return sParameterName[1];
        }
    }
}

To use just call

var flag = GetURLParameter('goto');

So, if you go to the url http://example.com/?goto=answer flag will contain "answer" and you will know were to scroll.

on click, go to another page and open a hidden div

2 Answers2