collapsible Fiddle

by Dev024

HTML

<!DOCTYPE html>
<html>
<head>

	<title>FAQ</title>

</head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<body>

<nav>

<div style="width: 750px; margin: 0 auto;">

</div>

</nav>

<link rel="stylesheet" type="text/css" href="CSS/faq.css">
<link rel="stylesheet" type="text/css" href="CSS/new_main_css.css">

<h1>FAQ</h1>

<button class="collapsible" data-toggle=""><b>Questions and Answers</b><i id="arrow" class="arrow right"></i></button>
<div class="content">
   <p>
     Lorem Ipsum...
   </p>
</div>


</body>

</html>

CSS

h1 {

	text-align: center;

}

.arrow {

	border: solid black;
	border-width: 0 3px 3px 0;
	display: inline-block;
	padding: 3px;

}

.down {

	margin-right: 50px;
	float: left;
	transform: rotate(45deg);
	-webkit-transform: rotate(45);

}

.right {
	margin-right: 50px;
	float: left;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}

.collapsible {
  color: black;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: solid thin;
  text-align: left;
  outline: none;
  font-size: 15px;
}



.active, .collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}

JavaScript

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    if(this.classList.contains("active")){
    this.childNodes[1].className = "arrow right"
    }else{
    this.childNodes[1].className = "arrow down"
    }
    this.classList.toggle("active");
    
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}