Skip to main content

HTML/JavaScript Accordion on Blogger

 

HTML

1
2
3
4
<button class="acc">Show Answer</button>
<div class="pnl">
  <p></p>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.acc {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}
.active, .acc:hover {
  background-color: #ccc;
}
.pnl {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type='text/javascript'>
     
//<![CDATA[
     var acc = document.getElementsByClassName("acc");
     var i;
    for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var pnl = this.nextElementSibling;
    if (pnl.style.display === "block") {
      pnl.style.display = "none";
    } else {
      pnl.style.display = "block";
    }
  });
}
    //]]>
 
</script>
Labels:

Comments

Post a Comment

Popular posts from this blog

How To Make a Pagination Using HTML and CSS

  CSS Code 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <style> . center {    text-align : center ; }   .pagination {    display : inline-block ; }   .pagination a {    color : black ;    float : left ;    padding : 8px 16px ;    text-decoration : none ;    transition : background-color . 3 s;    border : 1px solid #ddd ;    margin : 0 4px ; }   .pagination a.active {    background-color : #002468 ;    color : white ; }   .pagination a:hover:not(.active) { background-color : #ddd ;} </style> HTML Code 1 2 3 4 5 6 7 8 9 10 11 12 < div class = "center" >    < div class = "pagination" >    < a href = "#" >&laquo;</ a >    < a href = "#" >1</ a >    < a href = "#" class = "active" >2</ a >    < a href = "#" ...
Post a Comment
Read more