Collapsible Accordion With Pure JavaScript

In this example below you will see how to do a Collapsible Accordion With Pure JavaScript with some HTML / CSS and Javascript

no plugin needed

Thumbnail
This awesome code was written by uzcho_, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright uzcho_ ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Collapsible Accordion With Pure JavaScript</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1>Collapsible Accordion With Pure JavaScript<br>
<span>&ast; &ast; &ast; Pen by : Amli "@uzcho_" &ast; &ast; &ast;</span>
</h1>

<div class="pen_by_uzcho">
	<div class="accContainer">
			<button class="accBtn html" onclick="uzcho_acc('html')">&ast; &ast; &ast; HTML &ast; &ast; &ast;</button>
		<div class="accContent" id="Content_html">
			<p>&ast; &ast; &ast; Pen by : Amli "@uzcho_" &ast; &ast; &ast;</p>
			<p>&ast; &ast; &ast; Pen by : Amli "@uzcho_" &ast; &ast; &ast;</p>
		</div>
	</div>
	
	<div class="accContainer">
			<button class="accBtn css" onclick="uzcho_acc('css')">&ast; &ast; &ast; CSS &ast; &ast; &ast;</button>
		<div class="accContent" id="Content_css">
			<p>&ast; &ast; &ast; Pen by : Amli "@uzcho_" &ast; &ast; &ast;</p>
			<p>&ast; &ast; &ast; Pen by : Amli "@uzcho_" &ast; &ast; &ast;</p>
		</div>
	</div>
	
	<div class="accContainer">
			<button class="accBtn js" onclick="uzcho_acc('js')">&ast; &ast; &ast; JavaScript &ast; &ast; &ast;</button>
		<div class="accContent" id="Content_js">
			<p>&ast; &ast; &ast; Pen by : Amli "@uzcho_" &ast; &ast; &ast;</p>
			<p>&ast; &ast; &ast; Pen by : Amli "@uzcho_" &ast; &ast; &ast;</p>
		</div>
	</div>
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/uzcho_/collapsible-accordion-with-pure-javascript-wmNWxg */
*,*:after,*:before,html{box-sizing:border-box}
body,p{margin:0;padding:0}
body{
	background:#000;
	font-family:Tahoma,Geneva,sans-serif;
	font-style:normal;
	font-weight:400;
	text-align:center
	}
h1{margin:10px 0;font-size:32px;color:#fff;word-spacing:5px}
h1 span,p{font-size:16px;}
.pen_by_uzcho,[class*="acc"],:not(".accContent"){display:block}
[class*="acc"]{width:100%;position:relative;float:left}
.pen_by_uzcho{
	background:#fff;
	width:500px;
	padding:20px;
	top:50%;
	left:50%;
	position:absolute;
	transform:translate(-50%,-50%);
	border-radius:10px
	}
.accContainer{padding:8px}
.accBtn{
	margin:0;
	padding:16px 0;
	font-size:28px;
	vertical-align:middle;
	border:none;
	outline:none;
	cursor:pointer;
	}
.accBtn.html{background:#fc490b}
.accBtn.css{background:#0000ff}
.accBtn.js{background:#ff9900}
.accBtn:focus{background:#808080}
.accContent{display:none}
.show_Content{
	padding:20px 0;
	display:block;
	border:1px solid #a3a3a3;
	border-top:none;
	animation:slow-down .5s ease
	}
@keyframes slow-down{from{padding:0;opacity:0}to{padding:20px 0;opacity:1}}

/* Before - After Content : "pen_by_uzcho" , "show_Content" 
   ======================================================================== */
.pen_by_uzcho:before,.pen_by_uzcho:after,.show_Content:before
	{content:"";display:block;position:absolute}
.pen_by_uzcho:before,.pen_by_uzcho:after
	{background:#000;width:15px;height:15px;border-radius:50%}
.pen_by_uzcho:before{top:10px;left:10px}
.pen_by_uzcho:after{bottom:10px;right:10px}
.show_Content:before{
	width:8px;
	top:-7px;
	left:50%;
	border-left:8px solid transparent;
	border-right:8px solid transparent;
	border-bottom:8px solid #fff
	}

/*Downloaded from https://www.codeseek.co/uzcho_/collapsible-accordion-with-pure-javascript-wmNWxg */
function uzcho_acc(xid){
   var aC = document.getElementsByClassName("accContent");
   var i;
      for(i = 0; i < aC.length; i++){
         var OaC = aC[i];
            if(aC[i] != document.getElementById("Content_" + xid)){
               OaC.classList.remove("show_Content")
            }
      }
   document.getElementById("Content_" + xid).classList.toggle("show_Content")
}

Comments