The button isnt working along with the dropdown option. Any changes I need to make?
import React, { Component, Fragment } from 'react'
export class MegaMenu extends Component {
constructor(){
super();
this.MegaMenu = this.MegaMenu.bind();
}
componentDidMount(){
this.MegaMenu();
}
MegaMenu(){
var acc = document.getElementsByClassName("accordion");
var accNum = acc.length;
var i;
for(i=0;i<accNum;i++){
acc[i].addEventListener("click",function(){
this.classList.toggle("active");
var panel = this.nextElementSibling;
if(panel.style.maxHeight){
panel.style.maxHeight = null;
}else{
panel.style.maxHeight = panel.scrollHeight+ "px"
}
})
}
}
render() {
return (
<div className='accordionMenuDiv'>
<div className='accordionMenuDivInside'>
<button className='accordion'>
<img className='accordionMenuIcon' src="https://cdn-icons-png.flaticon.com/128/739/739249.png" /> Mens Clothing
</button>
<div className='panel'>
<ul>
<li><a href="a" className='accordionItem'>Mans T-shirt1</a></li>
<li><a href="a" className='accordionItem'>Mans T-shirt2</a></li>
</ul>
</div>
You can use onClick hanlder on react element itself this should work ,
this.handler = (e) => {
e.target.classList.toggle('active');
var panel = e.target.nextElementSibling;
if (panel.style.maxHeight) {
e.target.nextElementSibling.style.maxHeight = null;
} else {
e.target.nextElementSibling.style.maxHeight = e.target.nextElementSibling.scrollHeight + 'px';
}};
<button className='accordion' onClick= {this.handler}>
attach the onclick where ever you require for all the classname button if too many button then use event bubbling on a parent element of all the button