How to convert this jQuery snippet to vanilla JavaScript

Hi,

While I’m learning JavaScript, I started to work on the following example

[URL=”https://codepen.io/itsthomas/pen/wxwRYx?editors=1010″]https://codepen.io/itsthomas/pen/wxwRYx?editors=1010[/URL]

The script sends an Ajax call and gets back a simple JSON file.
I fetch the response and build a simple unordered list using Handlebars.js.
So far so good.

Now I wanted that if I click on the button in front of each character, a hidden div becomes visible, which contains some details about the character.
I achieved this easily using jQuery.
However, I spent a whole day to convert that small jQuery snippet to vanilla JS and failed badly. 🙁

How can I change the jQuery snippet, which shows and hides the div to vanilla JS?
It’s not important if it slides or not. It would be enough if I could just show and hide it by adding the class [B]visible[/B] to it.

This is the jQuery code, I want to convert to vanilla JS:

[CODE]
// jQuery solution using event delegation for slideToggle
$(‘#container’).on(‘click’, ‘button.btn’, function() {
console.log($(this)); // this is the button with the class btn

// If the button is clicked, add a class to .details
$(this).parent().parent().next($(‘.details’)).slideToggle();
})
[/CODE]

Also in #JavaScript _↴