How can we hide the "Optional Content 2" field on the login page (until a button is pressed)?

[CharlieH-ATS]

Hi There,

We need to hide the "Optional Content 2" field until either the Visitor or Employee button is pressed. So far, we have been able to hide the token username field until the button is pressed using some Javascript we were able to put together. Is there any way to amend this Javascript further to hide the entire box instead? Our customer has said it appears unprofessional as it stands at the moment. I've included a copy of the script below along with a screenshot of what the login page looks like before pressing a button.

Script:

<script>
function Employee() {
  document.getElementById("usertype").innerHTML = "The <b>Company Name</b> service is available across all areas. A WiFi token is required for both staff and guests.<br /><br /><br />To request a token please enter the following link in your laptops browser:  <u>http://link-here.com</u>";
  document.getElementById("selecttype").innerHTML = ""
  portalloginForm.elements["user.username"].style.visibility = 'visible';
  portalloginForm.elements["user.username"].type = 'visible';
}
</script><script>
function Visitor() {
  document.getElementById("usertype").innerHTML = "Please enter your access token details below.<br /><br /> ";
  document.getElementById("selecttype").innerHTML = ""
  portalloginForm.elements["user.username"].style.visibility = 'visible';
  portalloginForm.elements["user.username"].type = 'visible';
}
</script><script>
$(document).one('pageshow', function() {
   if
(!(/selfregistrationcancel|selfregistrationsuccess|SELF_REGISTRATION/i).test(document.location.href)) {
     jQuery('#ui_login_self_reg_button').click();
   }
});
portalloginForm.elements["user.password"].value = '0';
portalloginForm.elements["user.password"].style.visibility = 'hidden';
portalloginForm.elements["user.password"].type = 'hidden';
</script><script>
  portalloginForm.elements["user.username"].value = '';
  portalloginForm.elements["user.username"].style.visibility = 'hidden';
  portalloginForm.elements["user.username"].type = 'hidden';
  jquery("#ui_login_signon_button").css("#ui_login_signon_button","display: none")
</script><br _moz_editor_bogus_node="TRUE" />

[paul]

Others may respond on the Java side, but one option would be to bring the guests into a chooser portal that simply displays the buttons to choose the type of guest (Employee vs. Visitor).  Those buttons would then link to the Employee or Visitor portal based on what they selected.  Here is the link on how to code a link to another ISE guest portal while maintaining the session ID variable:

https://community.cisco.com/t5/identity-services-engine-ise/linking-one-guest-portal-to-another-guest-portal/td-p/3467537 

[Jason Kunst · Accepted solution]

there is also another one under http://cs.co/ise-guest
https://community.cisco.com/t5/security-documents/ise-hotspot-portal-with-links-to-employee-or-vendor-portals/ta-p/3643513

[Jason Kunst]

How about this

Please try to add the below script in Optional Content 2 of Login page.

This script has 2 buttons added dynamically and hide the content of the Optional content 2 field. Once user click on any of the buttons, then the content will be shown. 

The added text after closing <script> can be seen going away and displaying

<script>
                jQuery(window).ready(function() {
                             $("#ui_login_optional_content_2").hide();
                                jQuery('.cisco-ise-body').append('<center><div id="visitorId" style="color: rgb(0,255,0)"><button style="border-radius:4px;font-size:x-large;margin:8px;padding:8px;background-color:#0075BF;color:white;border:0" type="submit">Visitor</button></div></center>');
                                jQuery('.cisco-ise-body').append('<center><div id="emplyeeId" style="color: rgb(0,255,0)"><button style="border-radius:4px;font-size:x-large;margin:8px;padding:8px;background-color:#0075BF;color:white;border:0" type="submit">Employee</button></div></center>');
                                $('#visitorId').on("click", function(){
       $("#ui_login_optional_content_2").show();
                                });
                                $('#emplyeeId').on("click", function(){
          $("#ui_login_optional_content_2").show();
                                });
                });
</script>Optional Content Field 2