How to create multiple spoiler buttons

Question

When building my website, I decided I wanted to add a show/hide (spoiler) section in order to conserve space. Here is my "working" code:

JQuery:

$(document).ready(function(){ //Waits for page load
    $("a.spoilerButton, a.spoilerButtonDark").click(function () { //Attaches listeners
        $($(this).attr('href')).slideToggle(1000, null); //Open/closes spoiler
    });
});

CSS:

a.spoilerButton,
a.spoilerButtonDark {
    text-decoration:none;
    color:white;
}
a.spoilerButton:hover,
a.spoilerButtonDark:hover {
    color:grey;
    cursor: pointer;
}
a.spoiler {
    display:none;
}

HTML:

<div id="spoiler1" class="spoiler">Content</div> <!--Spoiler-->

<div class="contentBoxFooter">
    <a href="#spoiler1" class = "spoilerButton">Show/Hide</a> <!--Button-->
</div>

What I would like:

Support for multiple buttons
A way to link the buttons to its appropriate spoiler at any place in the HTML

Problems I am facing:

Don't exactly know the proper way to link the button to its appropriate spoiler, or if I'm doing it completely wrong
Current method uses href in anchor tag which shifts the page scroll location whenever clicked on

Main Question:

I thought about using the ID tag in the anchor tag to tell the script what the spoiler ID was, although I don't think ID tags were intended for that. Is that how I should go about doing this, or is it not the proper way to do it?

can you create the fiddle for your problem ? – IT ppl Mar 25 '14 at 10:56 — IT ppl, Mar 25 '14 at 10:56

score 2 · Accepted Answer · answered Mar 25 '14 at 10:30

I dont know if i understand your question correctly.
On this page there are four links that open the respective spoiler tags.
This is just a simple example, I hope it can help you.

<!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="a1" class="spoiler">Content</div> 
    <div id="a2" class="spoiler">Content</div>
    <div id="a3" class="spoiler">Content</div>
    <div id="a4" class="spoiler">Content</div>
    <div class="contentBoxFooter">
        <a href="a1" class = "spoilerButton">Show/Hide</a>
        <a href="a2" class = "spoilerButton">Show/Hide</a>
        <a href="a3" class = "spoilerButton">Show/Hide</a>
        <a href="a4" 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>
</html>

Yes, thank you! I didn't know you could cancel events, and I also didn't know if I was doing it right by using anchor tags in the first place. — CHess, Mar 25 '14 at 14:44
The only flaw in similar script is that you is forced to use specific ids for your spoiler div.With this other solution no. — Devima, Mar 25 '14 at 15:32