Display text field on button toggle

One way to approach this is to create a Text Entry question and use the Rich Content Editor’s HTML/Source view “<>” to update the Question Text with the below:

<button id="commentButton">Add Comment</button>

Then, add the below to the question’s JavaScript in the OnLoad section:

var qid = this.questionId;
var button = document.getElementById("commentButton");

jQuery("#"+qid+" .InputText").hide();

button.onclick=function() {
	jQuery("#"+qid+" .InputText").toggle();
};	

Each time the button is clicked, the Text Entry field will toggle between hidden and shown.

Add below code in HTML View:

Click button to open a text box
<br><br>
<button type="button" id="Button1">Add comment</button>

Add below code in Javascript:

    var qid = this.questionId;
var button = document.getElementById("Button1");

    jQuery("#"+qid+" .InputText").hide();
    
button.onclick=function() {
    jQuery("#"+qid+" .InputText").show();
}

I suggest you not to use toggle function as there may be a chance that user inputs a text but then clicks the button again to clear it BUT it results in hidden text box with data in it. As it is an open end, you can “Request response” rather than making it a “Force response”.

Hope this helps :)

Thank You @Tom_1842 , @Prateek.Dang this helped a lot. Can I know if there are any resources available to learn about jquery /javascript in implementation in Qualtrics. Again Thanks for the support!.