JavaScript button link on one page to show hidden div on another page

Question

I have a home.html and faq.html.

1. The faq page has many questions and their answers listed consecutively down the page. I want the answers hidden until a question is clicked that opens that answer. When another question is clicked, it will close the previous answer and open the new one. I'd like to use slideUp / slideDown or fadeIn / fadeOut for that, but not essential.

2. The home page has a link that when clicked, I want taken to the faq page and also have 'open' a specific answer, both from the one click; slideDown or fadeIn again not essential.

Is there a JavaScript that can be used to perform the task? I have seen some posts with setvisibility type code somewhat acceptable for the faq page, but not that I can activate from my home page. I am a novice, so I ask for the html code too that I can insert on both pages. A bigger chore than usual I know! Many thanks.

NOTE I now see a problem with my idea because of the following. I didn't mention it before but it would be neccessary. Let me try to explain it. I now find that to have a link on one page open another page at a particular position down that page will correctly position the page to that point IF previous content on that page is not hidden. If previous content is visibility: hidden; , that point where the page will open at is innacurate. In other words, it opens at a point below intended, a point at which is correct if previous content is not hidden. I hope that makes some sense. I will soon look at whether display:none; is better suited for this before I look at my original questions. Thanks to those who have helped me to date, you have spent a lot of time for me.

Answer 1

You can add querystring parameters to the request for the faq page and read the querystring using javascript on the faq page. Depending on the parameters you pass, you could do your desired animations.

In home.html : You would create the links with the query string param like so:

<a href="http://example.com/faq.html?question=125">Link to FAQ</a>

In faq.html : you would need to read the querystring parameter and depending on the value, call the javascript function that actually handles the show/hide of questions.

To read querystring parameters in javascript you need to parse window.location.search . Here is a javascript helper that you can use:

var QueryString = function () {
  // This function is anonymous, is executed immediately and 
  // the return value is assigned to QueryString!
  var query_string = {};
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
        // If first entry with this name
    if (typeof query_string[pair[0]] === "undefined") {
      query_string[pair[0]] = pair[1];
        // If second entry with this name
    } else if (typeof query_string[pair[0]] === "string") {
      var arr = [ query_string[pair[0]], pair[1] ];
      query_string[pair[0]] = arr;
        // If third or later entry with this name
    } else {
      query_string[pair[0]].push(pair[1]);
    }
  } 
    return query_string;
} ();

You can then access QueryString.question

Answer 2

Try this one

Reference

$(function() {
    $('div.answer').hide();        
    $('a.question').before('<span class="faqplusminus dark nounderline">[+]</span>');
    $('a.question').click(function() {
        $('div.answer').slideUp('slow', 'easeInOutExpo');            
        $('span.faqplusminus').html('[+]');    
        var slidedownelement = $(this).closest('div.faq').find('div.answer').eq(0);    
        if(!slidedownelement.is(':visible')) {
                slidedownelement.slideDown('slow', 'easeInOutExpo');
            slidedownelement.parent().find('span.faqplusminus').html('[-]');    
        }
    });
});