JSFiddle - React, Tailwind, and code Playground

by jonathanmh

HTML

<details open="">
<summary role="button" aria-expanded="true">Liste über Lernziele</summary>
<ul>
<li>Ziel 1</li>
<li>Ziel 2</li>
</ul>
</details>

JavaScript

$('details summary').click(function(){
//    if (!('open' in $(this).parent)) {
//    if (!$(this).parent().attr("open") || !("open" in $this.parent())){
    if ($(this).attr('aria-expanded') == 'false'){
//        $(this).next().hide();
        $(this).parent().attr('open','open');
        $(this).attr('aria-expanded','true');
        $(this).next().slideDown('slow');
        
    }
    else {
//        alert('else');
        
        $(this).next().slideUp('slow');
        $(this).parent().removeAttr('open');
        $(this).attr('aria-expanded','false');
//      $(this).parent().attr('open','open');
        
    }
    return false;
});