Click event find next div to add a css class Typescript

Question

I would like to make a function in Typescript to find the next div and add it a css class, here is my try:

<ul>
    <li><a href="#" onclick="toggle()">Item 1</a></li>
    <div class="content hide"></div>
    <li><a href="#" onclick="toggle()">Item 2</a></li>
    <div class="content hide"></div>
    <li><a href="#" onclick="toggle()">Item 3</a></li>
    <div class="content hide"></div>
    <li><a href="#" onclick="toggle()">Item 4</a></li>
    <div class="content hide"></div>
    <li><a href="#" onclick="toggle()">Item 5</a></li>
    <div class="content hide"></div>
</ul>

Now the function in Typescript

function toggle(){
   this.parent().next('.content').class('hide');
}

Thanks guys

Answer 1

this is not what you are assuming! You are suppose to pass current element as this as argument.

Also note there is no .class method, you should be using .toggleClass method.

 function toggle(elem) { $(elem).parent().next('.content').toggleClass('hide'); } 

 .hide { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <ul> <li><a href="#" onclick="toggle(this)">Item 1</a> </li> <div class="content hide">Content Goes here!</div> <li><a href="#" onclick="toggle(this)">Item 2</a> </li> <div class="content hide">Content Goes here!</div> <li><a href="#" onclick="toggle(this)">Item 3</a> </li> <div class="content hide">Content Goes here!</div> <li><a href="#" onclick="toggle(this)">Item 4</a> </li> <div class="content hide">Content Goes here!</div> <li><a href="#" onclick="toggle(this)">Item 5</a> </li> <div class="content hide">Content Goes here!</div> </ul> 

But it is better to use jQuery-event-binding than Inline-event-binding

 function toggle() { $(this).parent().next('.content').toggleClass('hide'); //this will refer to current element! } $('li a').on('click', toggle); 

 .hide { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <ul> <li><a href="#">Item 1</a> </li> <div class="content hide">Content Goes here!</div> <li><a href="#" onclick="toggle(this)">Item 2</a> </li> <div class="content hide">Content Goes here!</div> <li><a href="#">Item 3</a> </li> <div class="content hide">Content Goes here!</div> <li><a href="#">Item 4</a> </li> <div class="content hide">Content Goes here!</div> <li><a href="#">Item 5</a> </li> <div class="content hide">Content Goes here!</div> </ul> 

Answer 2

HTML Code

<a (click)="showparent($event)" class="collapsible-header">show next element</a>
<div class="collapsible-body" style="display:none">
   <ul>
     <li>Node2</li>
     <li>Node2</li>
     <li>Node2</li>
   </ul>
</div>

TypeScript Code

showparent(elem){
    const target = elem
    const display = target.toElement.nextSibling.style.display

    if(display == 'block'){
      target.toElement.nextSibling.style.display = 'none'
    }else{
      target.toElement.nextSibling.style.display = 'block'
    }
  }