"Multi Flat Spoiler"
Bootstrap 4.0.0 Snippet by agiltriono

<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}
$(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"); } }); });

Related: See More


Questions / Comments: