Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript / Jquery

How To Create Multiple Spoiler Buttons

Post a Comment
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(){ //Wai

Solution 1:

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>

Post a Comment for "How To Create Multiple Spoiler Buttons"