JSFiddle - React, Tailwind, and code Playground

by pmamode

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    
<p id="debug_field" class="debug" style="cursor:pointer;">
    None<hr>
</p>
        
<p id="pTag1" class="toggleHeader" style="cursor:pointer;">
    <span style="font-size:x-small;">&#9658</span> Collapsed text mode 1
</p>
<div id="divpTag1" class="Tag" style="display:none; padding-left:14px;">
    Content 1 that will be shown or hidden.
</div><hr>
<p id="pTag2" class="toggleHeader" style="cursor:pointer;">
    <span style="font-size:x-small;">&#9658</span> Collapsed text mode 2
</p>
<div id="divpTag2" class="Tag" style="display:none; padding-left:14px;">
    Content 2 that will be shown or hidden.
</div><hr>
<p id="pTag3" class="toggleHeader" style="cursor:pointer;">
    <span style="font-size:x-small;">&#9658</span> Collapsed text mode 3
</p>
<div id="divpTag3" class="Tag" style="display:none; padding-left:14px;">
    Content 3 that will be shown or hidden.
</div><hr>
</body>
</html>

JavaScript

$(document).ready(function(){
    
function toggleAndChangeText(p_id) {
    
     $('#debug_field').html(p_id);
    
     $('#div'+p_id).toggle();
    
     if ($('#div'+p_id).css('display') == 'none') {
          $('#'+p_id).html('<span style="font-size:x-small;">&#9658</span> Collapsed text mode');
     }
     else {
          $('#'+p_id).html('<span style="font-size:x-small;">&#9660</span> Expanded text mode');
     }
    
}
    
  $("#debug_field").click(function(){
    //$("."+"Tag").toggle();
     if ($("."+"Tag").css('display') != 'none') {
          $("."+"toggleHeader").html('<span style="font-size:x-small;">&#9658</span> Collapsed text mode');
          $("."+"Tag").css("display","none");
     }
      
     if ($("."+"Tag").css('display') == 'none') {
          $("."+"toggleHeader").html('<span style="font-size:x-small;">&#9660</span> Expanded text mode');
          $("."+"Tag").css("display","none");
     }
      
  }); 
    
  $("."+"toggleHeader").click(function(){
    toggleAndChangeText($(this).attr("id"));
  });


    
});





//toggleAndChangeText($(this).attr("id"));