JSFiddle - React, Tailwind, and code Playground

by shriek

HTML

<div>
    
    <div class="togglePanel2">
        This is something I need to do
    </div>
    <div class="toggler2 hi45">
        <a href="javascript:void(0);">Test</a>
    </div>
<div>
    
<div>
    <div class="toggler2 hi45">
        <a href="javascript:void(0);">Test</a>
    </div>
    <div class="togglePanel2">
        This is something I need to do
    </div>
<div>

JavaScript

$(document).on("click","[class^=toggler]",function(e){
		var self = $(this).attr("class"); //For regex string is needed
		var idNum = self.match(/\d+/); //Gets the identifier
		if($(".togglePanel"+idNum).length > 1){ //Correct structure is followed
			$(this).siblings(".togglePanel"+idNum).is(":visible")?$(this).siblings(".togglePanel"+idNum).slideUp():$(this).siblings(".togglePanel"+idNum).slideDown();
		}
		else{ //Unique id is given
			$( ".togglePanel"+idNum).is(":visible")?$(".togglePanel"+idNum).slideUp():$(".togglePanel"+idNum).slideDown();
		}
	});
$(document).on("click", "[class^=toggleAll]", function(){
	var self = $(this).attr("class"); //For regex string is needed
	var idNum = self.match(/\d+/); //Gets the identifier
	$( ".togglePanel"+idNum).is(":visible")?$(".togglePanel"+idNum).slideUp():$(".togglePanel"+idNum).slideDown();

	});