html button is requiring 2 clicks to toggle class?

I am currently struggling to get a function working with a button that has an onclick event to toggle a class. Please can you review the code and help me understand why it is needing two clicks and how to fix it.

function dropdownbuttonclick(element) {
  let coll = $(".dropdown");
  
  for (let i = 0; i < coll.length; i++) {
    //coll[i].addEventListener("click", function () { 
    $(this.firstChild).toggleClass('fa-chevron-down fa-chevron-up');
    var content = this.nextElementSibling;
    //console.log(content);
    
    if (content.style.height === "auto") {
      content.style.height = "75px";
    } 
    else {
      content.style.height = "auto";
    }
    //});
  }
}

if (row.description.length > 50) {
  return "<div width='100%' style='min-height:100px;" + backgrnd + "'><button type='button' class='dropdown' onclick='dropdownbuttonclick(this)'><i class='fa fa-solid fa-chevron-down'></i></button><div class='content' style='margin:20px;'>" + title + "</div></div>";
}

I have tried to change the onclick event but I am not sure how to fix.

The issue in your code is because this will refer to the window as the function was invoked via a onclick attribute.

As you're gone to the effort of including jQuery in the page, you should use that to attach your event handlers unobtrusively, and also to set the classes on the elements.

In addition, it's better practice to use CSS to update the UI, so simlpy toggling a class to set the height of the element would be a better approach. Try this:

jQuery($ => {
  $(document).on('click', '.dropdown', e => {
    const $dd = $(e.currentTarget);
    $dd.find('i').toggleClass('fa-chevron-down fa-chevron-up');    
    $dd.siblings('.content').toggleClass('large');
  }); 
});

.container {
  min-height: 100px;
}

.content { 
  margin: 20px;
  height: auto;
  border: 1px solid #C00; /* only for this demo to show the height change */
}

.content.large {
  height: 75px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="container">
  <button type="button" class="dropdown">
    <i class="fa fa-solid fa-chevron-down"></i>
  </button>
  <div class="content">Title</div>
</div>

Finally, note that any CSS/styling should be placed in an external stylesheet, not in the HTML.