JSFiddle - React, Tailwind, and code Playground

by pmamode

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    
<p id="debug_field2" class="debug2" style="cursor:pointer;">
    Debugger<hr>
</p><br>
<p id="debug_field" class="debug" style="cursor:pointer;">
    Open All<hr>
</p>

<div class="toggleHeader">
<p id="pTitle1" class="Title" style="cursor:pointer;">
    <span id="spanpTitle1" class="triangle" style="font-size:x-small;">&#9658</span> Title 1
</p>
<div id="divpTitle1" class="Content" style="display:none; padding-left:14px;">
    Content 1
</div><hr>
</div>
        
<div class="toggleHeader">     
<p id="pTitle2" class="Title" style="cursor:pointer;">
    <span id="spanpTitle2" class="triangle" style="font-size:x-small;">&#9658</span> Title 2
</p>
<div id="divpTitle2" class="Content" style="display:none; padding-left:14px;">
    Content 2
</div><hr>
</div>

<div class="toggleHeader">        
<p id="pTitle3" class="Title" style="cursor:pointer;">
    <span id="spanpTitle3" class="triangle" style="font-size:x-small;">&#9658</span> Title 3
</p>
<div id="divpTitle3" class="Content" style="display:none; padding-left:14px;">
    Content 3
</div><hr>
</div>
        
<div class="toggleHeader">        
<p id="pTitle4" class="Title" style="cursor:pointer;">
    <span id="spanpTitle4" class="triangle" style="font-size:x-small;">&#9658</span> Title 4
</p>
<div id="divpTitle4" class="Content" style="display:none; padding-left:14px;">
    Content 4
</div><hr>
</div>
        
</body>
</html>

JavaScript

$(document).ready(function(){
   //$('#debug_field2').html($('.Content').css('display'));
    function toggleAndChangeText(p_id) {
    
         $('#div'+p_id).toggle();
    
         if ($('#div'+p_id).css('display') == 'none') {
              $('#span'+p_id).html('<span style="font-size:x-small;">&#9658</span>');
              //$('#debug_field').html('Open All');
         }
         else {
              $('#span'+p_id).html('<span style="font-size:x-small;">&#9660</span>');
              //$('#debug_field').html('Close All');
         }
     }

  $("."+"Title").click(function(){
    toggleAndChangeText($(this).attr("id"));triangle
  });

  $(".debug").click(function(){
      x=0;
      
      $('.Content').each(function(index) {
          
              if ($(this).css('display') != 'none') {
                  x=1;
                  $('#debug_field').html('Close All');
                  return false;
              }

      });
      $('#debug_field2').html(x);
      
     //$('.Content').each(function(index) {
         //$('#debug_field2').html($('.Content').css('display'));
         //if ($(this).css('display') == 'none') {
              //$('#debug_field').html('Close All');
              //$('.triangle').html('&#9660 ');
              //$(this).css("display","inline");
         //}
         //else {
              //$('#debug_field').html('Open All');
              //$('.triangle').html('&#9658 ');
              //$(this).css("display","none");
         //}
     //});
  });

});