The problem is I can not toggle my Button. When I click another Button my previous one is closed. I want to toggle my button and when I click outside my content will be close. I don't want to use nextElementSibling is there any alternative options?
My CSS
<style>
.card{
width: 25%;
background: rgb(158, 158, 158);
margin-bottom: 20px;
}
.content{
display: none;
}
.toggle{
display: block
}
</style>
My HTML
<div class="rootdiv">
<div class="card">
<button class="click">Click</button>
<div class="content">
I am a event method somebody click me!
</div>
</div>
<div class="card">
<button class="click">Click</button>
<div class="content">
I am a event method somebody click me!
</div>
</div>
<div class="card">
<button class="click">Click</button>
<div class="content">
I am a event method somebody click me!
</div>
</div>
</div>
My SCRIPT
<script>
let selectElement = null;
let rootDev = document.querySelector('.rootdiv');
let btnClick = document.querySelector('.click');
let content = document.getElementsByClassName('content');
rootDev.addEventListener('click', (e) => {
let target = e.target
if(target.className != "nomatch"){
heightlight(target)
}
})
function heightlight(node){
if(selectElement != null){
selectElement.nextElementSibling.classList.remove('toggle')
}
selectElement = node;
selectElement.nextElementSibling.classList.add('toggle')
}
</script>
Preview
let selectElement = null;
let rootDev = document.querySelector('.rootdiv');
let btnClick = document.querySelector('.click');
let content = document.getElementsByClassName('content');
rootDev.addEventListener('click', (e) => {
let target = e.target
if(target.className != "nomatch"){
heightlight(target)
}
})
function heightlight(node){
if(selectElement != null){
selectElement.nextElementSibling.classList.remove('toggle')
}
selectElement = node;
selectElement.nextElementSibling.classList.add('toggle')
}
.card{
width: 25%;
background: rgb(158, 158, 158);
margin-bottom: 20px;
}
.content{
display: none;
}
.toggle{
display: block
}
<div class="rootdiv">
<div class="card">
<button class="click">Click</button>
<div class="content">
I am a event method somebody click me!
</div>
</div>
<div class="card">
<button class="click">Click</button>
<div class="content">
I am a event method somebody click me!
</div>
</div>
<div class="card">
<button class="click">Click</button>
<div class="content">
I am a event method somebody click me!
</div>
</div>
</div>
