Open spoiler on a separate page

Question

On my website, I have to build multiple spoilers. I'm planning to use this code for creating spoilers: How to create multiple spoiler buttons.

I'm looking for an easy way to create a link 'x' on a page 'A.html' that leads to the page 'B.html' and opens the spoiler 'x' on the page 'B.html'. So the spoiler name="x" and the URL should look similar to B.html#x.

In other words, I need a table of contents on the page A.html for spoilers on the page B.html.

But if you go straight to the page B.html, all spoilers should be closed by default with an option to open and close them by clicking on the spoiler title.

Any ready-made solutions would be appreciated. The solution shouldn't necessarily be based on the code I provided above.

Ok, I know that it's totally wrong, but this is what I tried.

A.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.spoiler {
    display:none;
    width:100%;
    height:50px;
    background-color:red;
    margin-bottom:10px;
}
.contentBoxFooter{position:absolute;bottom:10px;}
</style>
</head>
<body>
    <div id="x" class="spoiler">Content1</div> 
    <div id="y" class="spoiler">Content2</div>
    <div id="z" class="spoiler">Content3</div>
    <div class="contentBoxFooter">
        <a href="B.html#x" class = "spoilerButton">Show/Hide</a>
        <a href="B.html#y" class = "spoilerButton">Show/Hide</a>
        <a href="B.html#z" class = "spoilerButton">Show/Hide</a>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</body>
</html>

B.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.spoiler {
    display:none;
    width:100%;
    height:50px;
    background-color:red;
    margin-bottom:10px;
}
.contentBoxFooter{position:absolute;bottom:10px;}
</style>
</head>
<body>
    <div id="x" class="spoiler">Content1</div> 
    <div id="y" class="spoiler">Content2</div>
    <div id="z" class="spoiler">Content3</div>
    <div class="contentBoxFooter">
        <a href="#x" class = "spoilerButton">Show/Hide</a>
        <a href="#y" class = "spoilerButton">Show/Hide</a>
        <a href="#z" class = "spoilerButton">Show/Hide</a>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(".spoilerButton").click(function (e) { 
            e.preventDefault()
            var foo=$(this).attr('href')
            $(''+foo).slideToggle(1000); 
        });
    });
    </script>
</body>

Update: here's the example of what I need: https://support.google.com/plus/#topic=3049663 each section adds a unique URL ending to the link.

[What have you tried?](http://mattgemmell.com/what-have-you-tried/) Have you played with http://stackoverflow.com/questions/6644654/parse-url-with-jquery-javascript in order to get the `x` from `B.html#x` — Jason Aller, Apr 19 '14 at 18:26
Thank you for your reply! I have updated my question above to show what I have tried. I'm sorry, I haven't tried the solution you provided, but it seems like not what I'm looking for. — Anna, Apr 22 '14 at 17:59

alpham8 · Answer 1 · 2014-04-22T18:34:20.157

If you don´t like to do it over the querying the url, you need to open B.html in a new javascript window.

And there you can do something it, e. g.:

window win = window.open("B.html");
win.document.myVariable = "test";

Then you could read the variable on website B.html as you usually would do with myVariable

Edit: If you just want to load page B.html into a spoiler in page A.html then it´s just a single jquery command:

$("#spoiler").load("B.html");

score 0 · Accepted Answer · answered Apr 22 '14 at 20:57

0

I found a solution here: https://forum.jquery.com/topic/accordion-open-a-specific-tab-with-link-from-another-page

But I ended up with the accordion, instead of a set of spoilers, as I initially wanted.

answered Apr 22 '14 at 20:57

Anna

137
9

Open spoiler on a separate page

2 Answers2