Ok I had fun with this one. I've never embedded JavaScript before so this was brand new for me. I will tell you that if you change the js code you likely need to restart Splunk and I had to add a reset all button cause I did find some odd token behavior if you edit the xml on the fly.
JavaScript
require([
"splunkjs/mvc",
"splunkjs/mvc/simplexml/ready!"
], function(mvc) {
// Get your div
var var_proxysearch = $("#btn_proxysearch");
var var_wafsearch = $("#btn_wafsearch");
var var_dnssearch = $("#btn_dnssearch");
var var_emailsearch = $("#btn_emailsearch");
var var_resetall = $("#btn_resetall");
// lets play hide and seek
var_proxysearch.on("click", function(f_proxysearch) {
var tokens = mvc.Components.get("submitted");
tokens.set("tok_proxysearch","TRUE");
tokens.unset("tok_wafsearch");
tokens.unset("tok_dnssearch");
tokens.unset("tok_emailsearch");
});
var_wafsearch.on("click", function(f_wafsearch) {
var tokens = mvc.Components.get("submitted");
tokens.unset("tok_proxysearch");
tokens.set("tok_wafsearch","TRUE");
tokens.unset("tok_dnssearch");
tokens.unset("tok_emailsearch");
});
var_dnssearch.on("click", function(f_dnssearch) {
var tokens = mvc.Components.get("submitted");
tokens.unset("tok_proxysearch");
tokens.unset("tok_wafsearch");
tokens.set("tok_dnssearch","TRUE");
tokens.unset("tok_emailsearch");
});
var_emailsearch.on("click", function(f_emailsearch) {
var tokens = mvc.Components.get("submitted");
tokens.unset("tok_proxysearch");
tokens.unset("tok_wafsearch");
tokens.unset("tok_dnssearch");
tokens.set("tok_emailsearch","TRUE");
});
var_resetall.on("click", function(f_resetall) {
var tokens = mvc.Components.get("submitted");
tokens.unset("tok_proxysearch");
tokens.unset("tok_wafsearch");
tokens.unset("tok_dnssearch");
tokens.unset("tok_emailsearch");
});
Here is the XML
<form script="btn_hide_n_seek.js" version="1.1" theme="dark">
<label>Answers - Classic - Hide and Seek</label>
<fieldset submitButton="false">
<input type="text" token="tok_field1" depends="$tok_proxysearch$">
<label>Proxy</label>
</input>
<input type="text" token="tok_field2" depends="$tok_wafsearch$">
<label>WAF</label>
</input>
<input type="text" token="tok_field3" depends="$tok_dnssearch$">
<label>DNS</label>
</input>
<input type="text" token="tok_field4" depends="$tok_emailsearch$">
<label>Email</label>
</input>
</fieldset>
<row>
<panel>
<html>
<h1 style="text-align: center;">Choose from the below options to get started :)</h1>
<!-- Centered button container -->
<div style="display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 20px;">
<button class="btn btn-primary" style="background-color: #007bff; color: white; width: 150px; height: 50px; font-size: 18px; border: none; border-radius: 5px;" id="btn_proxysearch">Proxy Search</button>
<button class="btn btn-primary" style="background-color: #007bff; color: white; width: 150px; height: 50px; font-size: 18px; border: none; border-radius: 5px;" id="btn_wafsearch">WAF Search</button>
<button class="btn btn-primary" style="background-color: #007bff; color: white; width: 150px; height: 50px; font-size: 18px; border: none; border-radius: 5px;" id="btn_dnssearch">DNS Search</button>
<button class="btn btn-primary" style="background-color: #007bff; color: white; width: 150px; height: 50px; font-size: 18px; border: none; border-radius: 5px;" id="btn_emailsearch">Email Search</button>
<button class="btn btn-primary" style="background-color: #007bff; color: white; width: 150px; height: 50px; font-size: 18px; border: none; border-radius: 5px;" id="btn_resetall">Reset All</button>
</div>
</html>
</panel>
</row>
<row id="rows_proxy" depends="$tok_proxysearch$">
<panel>
<html>
<h1 style="text-align: center;">Proxy Row(s)</h1>
</html>
</panel>
</row>
<row id="rows_waf" depends="$tok_wafsearch$">
<panel>
<html>
<h1 style="text-align: center;">WAF Row(s)</h1>
</html>
</panel>
</row>
<row id="rows_dns" depends="$tok_dnssearch$">
<panel>
<html>
<h1 style="text-align: center;">DNS Row(s)</h1>
</html>
</panel>
</row>
<row id="rows_email" depends="$tok_emailsearch$">
<panel>
<html>
<h1 style="text-align: center;">Email Search</h1>
</html>
</panel>
</row>
</form>
