JSFiddle - React, Tailwind, and code Playground

by Cory Danielson

HTML

<div id="er1">er1 - click me</div>
<div id="er2">er2 - click me</div>
<div id="er3">er3 - click me</div>
<div id="er4">er4 - click me</div>
<div id="er5">er5 - click me</div>

<div id="cr1">cr1</div>
    <div class="slideToggle">I'm affected by slideToggle()</div>
<div id="cr2">cr2</div>
    <div class="slideToggle">I'm affected by slideToggle()</div>
<div id="cr3">cr3</div>
    <div class="slideToggle">I'm affected by slideToggle()</div>
<div id="cr4">cr4</div>
    <div class="slideToggle">I'm affected by slideToggle()</div>
<div id="cr5">cr5</div>
    <div class="slideToggle">I'm affected by slideToggle()</div>

CSS

body {
    font-family: Tahoma;
    font-size: 12px;
}

div {
    padding: 5px;
}

.but-extra-on {
    background-color: #0f0;
}

.but-closerow-on {
    background-color: #f00;
}

.but-closerow-on {
    background-color: #f00;
}

.but-closerow-on {
    background-color: #f00;
}

JavaScript

$(document).ready(function(){

    
   var count = 1;
   var curER = "div#er";

   while ( count != 6 )
   {
      $(curER + count).click({buddy: $("div:#cr"+count) }, function(e){
        $(this).toggleClass("but-extra-on");
        e.data.buddy.toggleClass("but-closerow-on");
        e.data.buddy.next("div").slideToggle("slow");
      });
      count++;
   }



});