JSFiddle - React, Tailwind, and code Playground

HTML

<div class="some_parent_class">
		<div class="widget_head_type">
			<span class="test">+ Menu</span>
		</div>
		<div class="widget_body_type">
			Body
		</div>
	</div>

CSS

.widget_head_type {
	cursor: pointer;
}

JavaScript

jQuery(function ($) {
	$('.widget_head_type').each(function () {
		// closures
		var $toggle = $(this);
		var $parent = $toggle.closest('.some_parent_class');
		var $target = $parent.find('.widget_body_type');
		var $label = $toggle.find('.test');
		var bIsTweening = false;
		// OR var $target = $toggle.next('.widget_body_type');
		// event methods (closures)
		var fClickToggle = function () {
			if (!bIsTweening) {
				bIsTweening = true;
				$target.slideToggle('slow', fToggleCallback);
			}
		};
		var fToggleCallback = function () {
			bIsTweening = false;
			fSetLabel();
		};
		var fSetLabel = function () {
			var sLabel = $label.text().replace('+', '').replace('-', '');
			sLabel = ($target.is(':visible') ? '-' : '+') + sLabel;
			$label.html(sLabel);
		};
		// handle event
		$toggle.click(fClickToggle);
		$target.hide();
		fSetLabel();
	});
});