<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="text-center"><h3 class="text-muted">Multi Spoiler</h3></div>
<spoiler title='Title Of Content 1'>Sample Content Will Be Wrapped Here</spoiler>
<spoiler title='Title Of Content 2'>Awesome Right</spoiler>
<spoiler title='Title Of Content 3'>You Can Write Any Content in here</spoiler>
<!-- You Can Add More Spoiler Tag -->
<!-- title='Title Of Content' this attribute for display the title Of Spoiler -->
</div>
<script type="text/javascript">
// Get The <spoiler> tag Name
var e = $(".container > spoiler");
// Declare another Variable
var t = e;
// Loop The Function For Each Element In DOM
for (var i = 0; i < t.length; i++) {
e[i].innerHTML = '<div class="spoiler-wrap"><div class="spoiler-head collapsed">'+e[i].title+'</div><div class="spoiler-body">'+t[i].textContent+'</div>';
}
</script>
/* MULTI SPOILER */
.spoiler-wrap{background-color:#60646D;border:1px solid #60646D;border-left-width:2px;clear:both;display:block;margin:6px auto;padding:0;width:95%}
.spoiler-head{color:#fff;cursor:pointer;display:block;font-weight:bold;line-height:1.5em;margin-left:6px;padding:0 6px 0 14px;text-align:left}
.spoiler-head.collapsed{background:url(data:image/gif;base64,R0lGODlhCQAJAMQfAIqZyoGSxv3+/trl84CQxYCRxn6PxMXQ7efq9H+Pwtnk8oKTxoCQxKy44QAAANvl9rvG6fD5/o2by4GRxvb8//v9//7+/ubw+v39/ouayoKSxoOTx/7+/wwMDP///////yH5BAEAAB8ALAAAAAAJAAkAAAU84AdoGkNmX4Z4HldRirSxXMdF1zK7nXU9mk2t4+h0BIlNhWPpYTCBDQXXwRwggczgJ8BAGhLRZGIoEFAhADs=) no-repeat left center}
.spoiler-head.expanded{background:url(data:image/gif;base64,R0lGODlhCQAJAMQeAOLt+ff8//z+/4CRxo2by7vF6a254X6PxICQw87a74CQxuXo84CQxM/b7/H6/v7+/oGRxouayoGSxv7+/8LN7IqZyv7//4KSxur0/MrV74OTx9Ld8trl9gwMDP///wAAACH5BAEAAB4ALAAAAAAJAAkAAAU4oFcpwzFAkWgUVLZxCQGxLgdgGtS+t6NJmY5QOEFcNo/kZGLRXGwYR0DQjDSiU8uCIJJIGJdLKgQAOw==) no-repeat left center}
.spoiler-body{background:#6c757d;color:#fff;border-top:1px solid #60646D;padding:2px 6px}
.spoiler-head{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.spoiler-body{display:none}
