add a toggle with jquery and change the class

HTML

<div class='toggle-title' onclick="$('#toggle-1').slideToggle(); $(this).toggleClass('open');" >My Toggle Title</div>
<div class='toggle-content' id="toggle-1">
  <p>some content to be toggled this should be hidden to start with when the page loads</p>
</div>

<div class='toggle-title' onclick="$('#toggle-2').slideToggle(); $(this).toggleClass('open');" >Another Toggle Item</div>
<div class='toggle-content' id="toggle-2">
  <p>some more content to be toggled this should be hidden to start with when the page loads</p>
</div>

CSS

.toggle-content {
	display:none;
}
.toggle-title {
  	margin-bottom:5px;
	padding:10px;
  	border:3px solid rgba(255,255,255,0.5);
  	border-radius:5px;
  	cursor:pointer;
  	position:relative;
  	background:linear-gradient(45deg, #dc3b3e, #3b99dc 50%, #3bdc90 75%, rgb(255 141 0) 100%);
}
.toggle-title::before {
	content:"+ ";
}
.toggle-title.open::before {
	content:"- ";
}

Scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>