Bootstrap Snippet Multi Flat Spoiler using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
/* 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}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(function(){
// Remove Spoiler Tag Name
$(".container > spoiler").contents().unwrap();
// Bind Spoiler Click
$(".spoiler-head").click(function(){
 $this = $(this);
  if($this.hasClass("expanded")){
        $this.removeClass("expanded");
        $this.addClass("collapsed");
        $this.next().slideUp("fast");
    }
  else{
        $this.removeClass("collapsed");
        $this.addClass("expanded");
        $this.next().slideDown("fast");
    }
  });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Multi Flat Spoiler"
Bootstrap 4.0.0 Snippet by agiltriono

Related: See More

Questions / Comments:

"Multi Flat Spoiler" Bootstrap 4.0.0 Snippet by agiltriono

Related: See More

Questions / Comments:

"Multi Flat Spoiler"
Bootstrap 4.0.0 Snippet by agiltriono