How to Create a Custom Accordion

This is the code of create custom accordion effect

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<style>

  body:not(.elementor-editor-active) .toggle_content{

  display:none;

}

.toggle_trigger{

  cursor:pointer

}

.arrow i{

     transition-duration: 0.5s;

}

</style>

<script>

jQuery(document).ready(function( $ ){

   jQuery(".toggle_trigger").on("click", function() {

    let $this = $(this);

    if ($this.hasClass('tab_active')) {

        $this.removeClass('tab_active');

        $this.next(".toggle_content").slideUp(200);

    } else {

        $this.toggleClass('tab_active');

        $this.next('.toggle_content').slideDown(200);

    }

  });

   });

</script>

Now we are going to see the code of hoverable button text change