Collapsible of CSS and JS not working in Angular app

Question

I have implemented collapsible in plain html page as follow:

<!DOCTYPE html>
<html>
<head>
  <title></title>

<style>
button.accordion {
    background-color: #777;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
}

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

button.accordion:after {
    content: '\002B';
    color: white;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: '';
    background-image: url('download.jpg');
    display: inline-block;
    background-size: 30px 30px;
    width:30px;
    height:30px;
    transform:rotate(180deg);
}

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


* {
  box-sizing: border-box;
}


#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
a{
     text-decoration: none;
     color:white;
}
</style>

</head>
<body>
<h2>Collapsible</h2>
<p>Click the button to toggle between showing and hiding the collapsible content.</p>




<div id="div2">
<button class="accordion"><a href="#">Addq</a></button>
<div class="panel"> 
  <p>Some collapsible content. Click the button to toggle between showing and hiding the collapsible content. Lorem ipsum dolor sit amet,ome Some collapsible content. Click the button to toggle between showing and hiding the collapsible content. </p>
<button class="accordion"><a href="#">Aollapsible</a></button>
<div class="panel">
  <p>sdfsdfsdfsdt amet,ome Some collapsible content. Click the button to toggle between showing and hiding the collapsible content. </p>
</div>
<button class="accordion"><a href="#" style="">Dollapsible</a></button>
<div class="panel">
  <p>qqqqqqqqqqqpsible content. consequat.</p>
</div>
<button class="accordion"><a href="#">Qollapsible</a></button>
<div class="panel">
  <p>zzzzzzzzzllapsible content. commodo consequat.</p>
</div>

</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  }
}


</script>


</body>
</html>

JS Fiddle: https://jsfiddle.net/c2r70eh6/4/

But when I write same code in angular application, the collapsible doesnt expand. While writing in Angular- I put html code in html file of that component, CSS in css file of that component and JS I copied in index.html file.

Its working fine in simple html file. But not in angular. I checked all the ids they are correct.

Need your help. Thanks in advance!

Answer 1

I'm not really in support of what you're doing right now. But just for the sake of making it work, here's what you'll need to do in the Component Class:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  acc = document.getElementsByClassName("accordion");

  ngOnInit() {
    for (let i = 0; i < this.acc.length; i++) {
      (<HTMLButtonElement>this.acc[i]).onclick = function () {
        this.classList.toggle("active");
        var panel = <HTMLDivElement>this.nextElementSibling;
        if (panel.style.maxHeight) {
          panel.style.maxHeight = null;
        } else {
          panel.style.maxHeight = panel.scrollHeight + "px";
        }
      }
    }
  }

}

Here's a Working Sample StackBlitz for your ref.

Answer 2

You completely do not need the angular at all to collapse the panels - you can do it with straight css.

all you have to do is toggle the active class on the button click and then use the direct sibling combinator to target the next div and style it to be open or shut

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


.accordion.active + .panel {
    max-height: 500px;
    transition: max-height 0.2s ease-out;
}

 var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function() { this.classList.toggle("active"); } }

 button.accordion { background-color: #777; color: white; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; } button.accordion.active, button.accordion:hover { background-color: #555; } button.accordion:after { content: '\\002B'; color: white; font-weight: bold; float: right; margin-left: 5px; } button.accordion.active:after { content: ''; background-image: url('download.jpg'); display: inline-block; background-size: 30px 30px; width:30px; height:30px; transform:rotate(180deg); } .panel { padding: 0 18px; background-color: #f1f1f1; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } .accordion.active + .panel { max-height: 500px; transition: max-height 0.2s ease-out; } * { box-sizing: border-box; } #myUL { list-style-type: none; padding: 0; margin: 0; } a{ text-decoration: none; color:white; }

 <h2>Collapsible</h2> <p>Click the button to toggle the collapsible content.</p> <div id="div2"> <button class="accordion"><a href="#">Addq</a></button> <div class="panel"> <p>Some collapsible content. Click the button to toggle between showing and hiding the collapsible content. Lorem ipsum dolor sit amet,ome Some collapsible content. Click the button to toggle between showing and hiding the collapsible content. <button class="accordion"><a href="#">Aollapsible</a></button> <div class="panel"> <p>sdfsdfsdfsdt amet,ome Some collapsible content. Click the button to toggle between showing and hiding the collapsible content. </p> </div> <button class="accordion"><a href="#" style="">Dollapsible</a></button> <div class="panel"> <p>qqqqqqqqqqqpsible content. consequat.</p> </div> <button class="accordion"><a href="#">Qollapsible</a></button> <div class="panel"> <p>zzzzzzzzzllapsible content. commodo consequat.</p> </div> </div>

Collapsible of CSS and JS not working in Angular app

Question

2 answers

solution1
2 ACCPTED 2019-06-19 10:41:26

solution2
0 2019-06-19 11:15:30

Collapsible of CSS and JS not working in Angular app

Question

2 answers

solution1 2 ACCPTED 2019-06-19 10:41:26

solution2 0 2019-06-19 11:15:30

solution1
2 ACCPTED 2019-06-19 10:41:26

solution2
0 2019-06-19 11:15:30