How to make UI Fields disappear and have other fields appear in their place

AutomationNinja · January 12, 2013

I have been playing with TJ's Tabbed HTML and came up with this to make a field disappear and have another appear in its place when the box is checked. (see fancy tab). Took me a while to figure it out so I thought I would share it in case anyone tries to do something similar.

ui html panel("<!DOCTYPE html>
<html>

<head>
<meta charset=\'UTF-8\'>

<title>CSS Tables by Theodore Gaushas - BotGuru.net</title>





<style>
* \{ margin: 0; padding: 0; \}
#page-wrap \{ width: 100%px; margin: 50px auto; \}
h1 \{ font: 36px Georgia, Serif; margin: 20px 0; \}
.group:after \{ visibility: hidden; display: block; font-size: 0; content: \" \"; clear: both; height: 0; \}
p \{ margin: 0 0 10px 0; \}

.tabs \{ list-style: none; \}
.tabs li \{ display: inline; \}
.tabs li a \{ color: black; float: left; display: block; padding: 4px 10px; margin-left: -1px; position: relative; left: 1px; background: white; text-decoration: none; \}
.tabs li a:hover \{ background: #ccc; color: black;\}

/* Generic styles & example one */

.tabbed-area \{ margin: 0 0 0px 0; \}
.box-wrap \{ position: relative; min-height: 150px; \}
.tabbed-area div div \{ background: white; padding: 20px; min-height: 150px; position: absolute; top: -1px; left: 0; width: 100%; \}
.tabbed-area div div, .tabs li a \{ border: 1px solid #ccc; \}
#box-one:target, #box-two:target, #box-three:target, #box-four:target \{ z-index: 1; \}

</style>

<script language=\"javascript\">
function toggle(spanId) \{
var spanArray = document.getElementsByTagName(\"span\");
for(i = 0; i < spanArray.length; i++)\{
if(spanArray.id == spanId)\{
if(spanArray.style.display != \'none\')\{
spanArray.style.display = \'none\';
\}else\{
spanArray.style.display = \'\';
\}
\}
\}
\}
</script>
</head>

<body>

<div class=\"tabbed-area\">

<ul class=\"tabs group\">
<li><a href=\"#box-one\">TAB 1</a></li>
<li><a href=\"#box-two\">Fancy Tab</a></li>
<li><a href=\"#box-three\">TAB 3</a></li>
<li><a href=\"#box-four\">TAB 4</a></li>
</ul>

<div class=\"box-wrap\">

<div id=\"box-one\">
<p>TAB 1...</p>

<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">
<tr>
<td><table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">
<tr>
<td>Input Example</td>
<td><input name=\"inputexample\" type=\"text\" variable=\"#inputexample\" fillwith=\"value\" /></td>
</tr>
<tr>
<td>Dropdown Example</td>
<td><select name=\"dropdownexample\" variable=\"#dropdownexample\" fillwith=\"value\">
<option selected=\"selected\" value=\"0\">Choose a category</option>
<option value=\"1\">Option 1</option>
<option value=\"2\">Option 2</option>
</select></td>
</tr>
<tr>
<td>Checkbox Example</td>
<td><input name=\"checkboxexample\" type=\"checkbox\" variable=\"#checkboxexample\" fillwith=\"checked\"/></td>
</tr>
</table></td>
<td><table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">
<tr>
<td>Textarea Example</td>
</tr>
<tr>
<td><textarea name=\"textareaexample\" cols=\"20\" rows=\"5\" variable=\"#textareaexample\" fillwith=\"value\"></textarea></td>
</tr>
</table></td>
</tr>
</table>

</div>

<div id=\"box-two\">
<p>Fancy Tab...</p>
<span id=\"non-descript\" style=\"display:\'\'\">
<form>
<input type=\"checkbox\" variable=\"#noworkiecheckbox\" fillwith=\"checked\" unchecked onclick=\"toggle(\'btwo\');\"> Create and save new user info:</form>
</span>
<span id=\"btwo\" style=\"display: none\">

Save to: <input name=\"savenewuserinform\" type=\"file\" variable=\"#savenewuserinform\">
</span>



                   <span id=\"non-descript\" style=\"display: block\'\'\"><span id=\"btwo\" style=\"display: block\">Upload existing user info: <input name=\"accounts\" variable=\"#accounts\" type=\"file\"></span></span><br>

</div>

<div id=\"box-three\">
<p>TAB 3...</p>

<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">
<tr>
<td><table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">
<tr>
<td>Input Example</td>
<td><input name=\"inputexample\" type=\"text\" variable=\"#inputexample\" fillwith=\"value\" /></td>
</tr>
<tr>
<td>Dropdown Example</td>
<td><select name=\"dropdownexample\" variable=\"#dropdownexample\" fillwith=\"value\">
<option selected=\"selected\" value=\"0\">Choose a category</option>
<option value=\"1\">Option 1</option>
<option value=\"2\">Option 2</option>
</select></td>
</tr>
<tr>
<td>Checkbox Example</td>
<td><input name=\"checkboxexample\" type=\"checkbox\" variable=\"#checkboxexample\" fillwith=\"checked\"/></td>
</tr>
</table></td>
<td><table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">
<tr>
<td>Textarea Example</td>
</tr>
<tr>
<td><textarea name=\"textareaexample\" cols=\"20\" rows=\"5\" variable=\"#textareaexample\" fillwith=\"value\"></textarea></td>
</tr>
</table></td>
</tr>
</table>

</div>

<div id=\"box-four\">
<p>TAB 4...</p>

<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">
<tr>
<td><table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">
<tr>
<td>Input Example</td>
<td><input name=\"inputexample\" type=\"text\" variable=\"#inputexample\" fillwith=\"value\" /></td>
</tr>
<tr>
<td>Dropdown Example</td>
<td><select name=\"dropdownexample\" variable=\"#dropdownexample\" fillwith=\"value\">
<option selected=\"selected\" value=\"0\">Choose a category</option>
<option value=\"1\">Option 1</option>
<option value=\"2\">Option 2</option>
</select></td>
</tr>
<tr>
<td>Checkbox Example</td>
<td><input name=\"checkboxexample\" type=\"checkbox\" variable=\"#checkboxexample\" fillwith=\"checked\"/></td>
</tr>
</table></td>
<td><table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">
<tr>
<td>Textarea Example</td>
</tr>
<tr>
<td><textarea name=\"textareaexample\" cols=\"20\" rows=\"5\" variable=\"#textareaexample\" fillwith=\"value\"></textarea></td>
</tr>
</table></td>
</tr>
</table>

</div>

<div id=\"box-five\">
<p>Intro...</p>

Text Or Banner can be listed here to give detail about your product, or service you provide.

</div>

</div>

</div>
</body>
</html>
", 250)

Sign In

How to make UI Fields disappear and have other fields appear in their place

Recommended Posts

AutomationNinja 194

Link to post

Share on other sites

Join the conversation

Browse

Activity