JSFiddle - React, Tailwind, and code Playground

by Govinda Sakhare

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="testTable bottomBox" id="double-scroll" style="overflow-x: scroll; overflow-y: hidden;">
					
					 <div id="table_sorter_container" style="display: inline-block;">
						<table id="table_sorter">
						  <tr >
                <th>abc</th>
                <th>abc</th>
                <th>abc</th>
              </tr>
               <tr >
               <td>asasdas</td>
               <td>adasdasd</td>
               <td>adasdasdasd</td>
              </tr>
                              <tr >
               <td>asasdas</td>
               <td>adasdasd</td>
               <td>adasdasdasd</td>
              </tr> 
						</table>
					</div>
					
					<div id="notLoginStudentBoxContainer" style="display: inline-block;">
						<div id="notLoginStudentBtn">	Not Login Student <span>+</span>
								
									
							</div>
						<div id="notLoginStudentBoxContainer">
							<div id="notLoginStudentBox">
									
										
									
										
									
										
											<p>
												<span onclick="showProfile('33')" class="cursor">student12</span>
											</p>
										
									
										
											<p>
												<span onclick="showProfile('34')" class="cursor">student13</span>
											</p>
										
									
										
											<p>
												<span onclick="showProfile('35')" class="cursor">student14</span>
											</p>
										
									
										
											<p>
												<span onclick="showProfile('36')" class="cursor">student15</span>
											</p>
										
									
							</div>
						</div>
						<div>
					</div>
				

			</div>

JavaScript

$("#notLoginStudentBtn").click(function() {
		
		$("#notLoginStudentBox").fadeToggle("slow", function(){
			if( $("#notLoginStudentBtn span").html() == "+"){
				$("#notLoginStudentBtn span").html("-");
			}
			else{
				$("#notLoginStudentBtn span").html("+");
			}
		});
	});