JSFiddle - React, Tailwind, and code Playground

by Balkanlii

HTML

<table>

<tr class="clickable" id="trProjectDetails">
                    <td>
                        <h4>Project Details <span>-</span></h4>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span id="spanQ1">1. Describe the project's outcome in one sentence.</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input name="txtProjectTitle" type="text" id="MainContent_txtProjectTitle" placeholder="min. 10 characters" style="width: 10em;">
                    </td>
                </tr>
                  
</table><br />
<input type="submit" name="btnSubmit" value="Submit" onclick="return validate();" id="MainContent_btnSubmit">

CSS

tr.clickable
        {
            cursor:pointer;
        }

JavaScript

$('.clickable').click(function(){
               $(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
                $(this).nextUntil('tr.clickable').slideToggle(100, function(){
                });
            });

function validate()
{
 if(document.getElementById('MainContent_txtProjectTitle').value.length <= 10)
 {
    document.getElementById('MainContent_txtProjectTitle').focus();
 }
}