Show and Hide div in Generic JavaScript View

Hi everyone,

I want a div (include dropdown, textbox vs.) to be opened when I press a radio button, and when I press another radio button the corresponding div should be closed. I have tried something but nothing happens yet. The code I wrote in Generic JS View Node given below,

var body = document.getElementsByTagName('body')[0];

function ShowOrHide(){
	html += '<div id="openeddiv" style="display: block"><label for="textbox"><input type="text" id="textbox" /> Opened Textbox </label></div>';
}


var html = '<span><b>Select Your Option:</span></b><br>';
html += '<label for="Option1"><input type="radio" id="Option1" name="chkPassPort" onclick="ShowOrHide()" />Option1</label><br>';
html += '<label for="Option2"><input type="radio" id="Option2" name="chkPassPort"  />Option2</label><br>';
html += '<label for="Option2"><input type="radio" id="Option2" name="chkPassPort" />Option3</label>';

body.innerHTML = html;

Can you help me to build the code as I desire?

Best,

Hi,
You need to add your div to the page at the beginning and set the style to display: none. When the user presses the button, you just change the style to display: block. That should do the trick.
Kind regards,
Alexander

Edit: Sorry, I wrote display: none both times, but the second should of course be display: block

2 Likes

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.