How to make a div show when a button is clicked

Question

How can I make the show when the button#armaway () is clicked? Maybe by using JavaScript code? Are there any syntax errors in JS that need to be fixed? I'm not sure if there is more code here that I accidentally messed up. code

Code below

<!DOCTYPE html>
<html>
  <body>
    <head>
      <center>
                <div class="system-status-menu">
        <style id="armStyle">
          .arm-away, .arm-stay, .night-stay, .arm-away-bypass, .alarm {
  /* gradient and fallback color */
  fill: url(#arm) #d00202;
u            }
    </style>
        <style id="settingsStyle">
          .settings {
  /* gradient and fallback color */
  fill: url(#settingsother) #595959;
            }
    </style>
        
         <style id="wifiOther">
          .wifi {
  /* gradient and fallback color */
  fill: url(#wifiOption) #87dce8;
            }
    </style>
        
       <style id="MAIL">
         .MAIL {
  /* gradient and fallback color */
           fill: url(#MAIL) #5BFDFD;
            }
    </style>
                  
       <style id="warning">
          .warning {
  /* gradient and fallback color */
  fill: url(#warning) #ffce44;
            }
    </style>
        <!---->
       <div id="configuration-settings" style="display: none;">
         <br>
         <label>Brightness</label>
         <input type="range">
         <br>
         <label>Contrast</label>
         <input type="range">
         <br>
         <label>Volume</label>
         <input type="range">
         <br><br>
         <label class="container">
         <label>Voice Chime</label>
         <input type="checkbox">
         <label>Tone Chime</label>
         <input type="checkbox">
         <span class="checkmark"></span>
         <br><br>
         </label>
         <button id="btn-back">
           <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
         </button>
         <button id="btn-clean">
           <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M15,11V1H9v10H3v12h18V11H15z M19,21h-2v-4h-2v4h-2v-4h-2v4H9v-4H7v4H5v-8h14V21z"/></g></svg>
           <br>
           Clean
         </button>
       </div>
        <div class="armscreen" style="display: none;"> 
          <br>
          <button class="back-button" onclick="back()">◀ Back</button>
          <br><br><br><br><br><br>
          <p class="armscreen-mode-text">Arm the system in <span class="arming-mode-text-type"></span> mode</p>
          <div class="password-icon"></div>
    <input type="text" maxlength="4" class="arm-code-entry"><p id="button-space">
          <br>
          <button class="keypad-code-number">1</button>
          <button class="keypad-code-number">2</button>
          <button class="keypad-code-number">3</button>
          <br>
          <button class="keypad-code-number">4</button>
          <button class="keypad-code-number">5</button>
          <button class="keypad-code-number">6</button>
          <br>
          <button class="keypad-code-number">7</button>
          <button class="keypad-code-number">8</button>
          <button class="keypad-code-number">9</button>
          
          <br>
          <!-- reference: 0 -->
          <button class="keypad-code-number">0</button>
          </p>
        </div>
      <div class="header">
        <button style="float: left;" id="wifi" title="Network Settings" onclick="configureWifi()">
          <div class="container">
          <div class="wired alert alert-success">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24" height="24" fill="#87dce8" class="wifi" style="display: none;"><path d="M4.504 13.572l-1.505-1.489c2.201-2.805 5.413-4.583 9.001-4.583s6.8 1.779 9 4.583l-1.504 1.489c-1.835-2.338-4.512-3.822-7.496-3.822s-5.661 1.484-7.496 3.822zm7.496.678c1.791 0 3.397.891 4.498 2.293l1.502-1.488c-1.467-1.869-3.608-3.055-6-3.055s-4.533 1.186-6 3.055l1.502 1.488c1.101-1.402 2.707-2.293 4.498-2.293zm0 2.25c-1.196 0-2.258.602-2.99 1.536l2.99 2.964 2.99-2.963c-.732-.935-1.794-1.537-2.99-1.537zm0-11.25c4.179 0 7.927 2.078 10.495 5.351l1.505-1.491c-2.935-3.739-7.217-6.11-12-6.11s-9.065 2.371-12 6.11l1.505 1.491c2.568-3.273 6.316-5.351 10.495-5.351z"/></svg>
          </div>
          <div class="unwired alert alert-danger">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24" height="24" fill="#474747" class="offline"><path d="M4.504 13.572l-1.505-1.489c2.201-2.805 5.413-4.583 9.001-4.583s6.8 1.779 9 4.583l-1.504 1.489c-1.835-2.338-4.512-3.822-7.496-3.822s-5.661 1.484-7.496 3.822zm7.496.678c1.791 0 3.397.891 4.498 2.293l1.502-1.488c-1.467-1.869-3.608-3.055-6-3.055s-4.533 1.186-6 3.055l1.502 1.488c1.101-1.402 2.707-2.293 4.498-2.293zm0 2.25c-1.196 0-2.258.602-2.99 1.536l2.99 2.964 2.99-2.963c-.732-.935-1.794-1.537-2.99-1.537zm0-11.25c4.179 0 7.927 2.078 10.495 5.351l1.505-1.491c-2.935-3.739-7.217-6.11-12-6.11s-9.065 2.371-12 6.11l1.505 1.491c2.568-3.273 6.316-5.351 10.495-5.351z"/></svg>
            </div>
          </div>
<svg xmlns="http://www.w3.org/2000/svg" height="15px" viewBox="0 0 24 24" width="15px" fill="#7f413a" class="network-x" style="display: none;"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg> 
  </button>
        <div class="system-top-text-readonly-status" style="user-select: none;">
          <div class="status1">
            <span class="value">Ready To Arm</span>
            <button id="helpButton" title="Help">
          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000" class="help"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 4c-4.41 0-8 3.59-8 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8zm1 14h-2v-2h2v2zm0-3h-2c0-3.25 3-3 3-5 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 2.5-3 2.75-3 5z" opacity=".3"/><path d="M11 16h2v2h-2zm1-14C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/></svg>
          </div>
        </div>
      </div>
        <br>
        <div class="emergency-icons">
         <button id="emergency">
           <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#cf1111"><path d="M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"/></svg>
           <div class="emergency-menu" style="display: none;"></div>
          </button>
        </div>
      <br>
        <br>
        <br>
        <br>
        <button id="system-status" title="Ready To Arm">
          <svg style="position:absolute;" aria-hidden="true" focusable="false">
  <linearGradient id="disarmed" x2="0" y2="1">
    <stop offset="0%" stop-color="#1dd82a" />
    <stop offset="100%" stop-color="#3aa53b" />
  </linearGradient>
</svg>
          <svg style="position:absolute;" aria-hidden="true" focusable="false">
  <linearGradient id="trouble" x2="0" y2="1">
    <stop offset="0%" stop-color="#ff8800" />
    <stop offset="100%" stop-color="#bd6500" />
  </linearGradient>
</svg>  
          
          <svg style="position:absolute;" aria-hidden="true" focusable="false">
  <g transform=""></g>
  <linearGradient id="fault" x2="0" y2="1">
    <stop offset="0%" stop-color="#88ff00" />
    <stop offset="100%" stop-color="#5cad00" />
  </linearGradient>
</svg> 
          
          <svg style="position:absolute;" aria-hidden="true" focusable="false">
  <linearGradient id="MAIL" x2="0" y2="1">
    <stop offset="0%" stop-color="#5BFDFD" />
    <stop offset="100%" stop-color="#87dce8" />
  </linearGradient>
</svg> 
          <svg style="position:absolute;" aria-hidden="true" focusable="false">
  <radialGradient id="warning" x2="0" y2="1">
    <stop offset="0%" stop-color="#fffb00" />
    <stop offset="100%" stop-color="#b5b200" />
  </radialGradient>
</svg> 
          <style>
          .disarmed {
  /* gradient and fallback color */
  fill: url(#disarmed) #1c6c5f;
}
          </style>
          <style>
          .trouble, .trouble1, .trouble2 {
  /* gradient and fallback color */
  fill: url(#trouble);
}
          
          </style>
          <style>
          .fault, .fault2 {
  /* gradient and fallback color */
  fill: url(#fault);
}
          
            </style>
          <div class="svg-icons">
      <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="150px" viewBox="0 0 24 24" width="150px" fill="#disarmed" class="disarmed"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><path d="M12,2L4,5v6.09c0,5.05,3.41,9.76,8,10.91c4.59-1.15,8-5.86,8-10.91V5L12,2z M15.5,14.09l-1.41,1.41L12,13.42L9.91,15.5 L8.5,14.09L10.59,12L8.5,9.91L9.91,8.5L12,10.59l2.09-2.09l1.41,1.41L13.42,12L15.5,14.09z"/></g></svg>
          
          <svg xmlns="http://www.w3.org/2000/svg" height="150px" viewBox="0 0 24 24" width="150px" fill="#000000" class="fault" style="display: none;"><path d="M0 0h24v24H0V0z" fill="none"></path>
<path xmlns="http://www.w3.org/2000/svg" d="M17 7h-4v2h4c1.65 0 3 1.35 3 3s-1.35 3-3 3h-4v2h4c2.76 0 5-2.24 5-5s-2.24-5-5-5zm-6 8H7c-1.65 0-3-1.35-3-3s1.35-3 3-3h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-2z"></path>
</svg> 
          <svg xmlns="http://www.w3.org/2000/svg" height="150px" viewBox="0 0 24 24" width="150px" fill="#000000" class="fault2" style="display: none;"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z"/></svg>
          
          <svg xmlns="http://www.w3.org/2000/svg" height="150px" viewBox="0 0 24 24" width="150px" class="trouble" fill="#trouble" style="display: none;"><path d="M0 0h24v24H0z" fill="none"></path><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"></path></svg>
          
          <svg xmlns="http://www.w3.org/2000/svg" height="150px" viewBox="0 0 24 24" width="150px" fill="#trouble" class="trouble1" style="display: none;"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 7V3h-2v4h-4V3H8v4H6v7.5L9.5 18v3h5v-3l3.5-3.51V7h-2z"/></svg>
            <svg xmlns="http://www.w3.org/2000/svg" height="150px" viewBox="0 0 24 24" width="150px" fill="#warning" class="trouble1" style="display: none;"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M17 4h-3V2h-4v2H7v18h10V4zm-4 14h-2v-2h2v2zm0-4h-2V9h2v5z"/></svg>
          
          <svg xmlns="http://www.w3.org/2000/svg" height="150" viewBox="0 96 960 960" width="150" class="alarm" style="display: none;"><path d="M450 628h60V416h-60v212Zm29.982 108q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM160 856v-60h84V490q0-84.174 49.5-149.587Q343 275 424 258v-29q0-23 16.265-38 16.264-15 39.5-15Q503 176 519.5 191t16.5 38v29q81 17 131 82.413T717 490v306h83v60H160Zm320-295Zm0 415q-32 0-56-23.5T400 896h160q0 33-23.5 56.5T480 976ZM304 796h353V490q0-74-51-126t-125-52q-74 0-125.5 52T304 490v306Z"/></svg>
          <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="150px" viewBox="0 0 24 24" width="150px" fill="#arm" class="night-stay" style="display: none;"><g><rect fill="none" height="24" width="24"/></g><g><path d="M12,2L4,5v6.09c0,5.05,3.41,9.76,8,10.91c4.59-1.15,8-5.86,8-10.91V5L12,2z M15.97,14.41c-1.84,2.17-5.21,2.1-6.96-0.07 c-2.19-2.72-0.65-6.72,2.69-7.33c0.34-0.06,0.63,0.27,0.51,0.6c-0.46,1.23-0.39,2.64,0.32,3.86c0.71,1.22,1.89,1.99,3.18,2.2 C16.05,13.72,16.2,14.14,15.97,14.41z"/></g></svg>
            
          <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="150px" viewBox="0 0 24 24" width="150px" fill="#000000" class="night-stay" style="display: none;"><g><rect fill="none" height="24" width="24"></path></g><g><g><g><path d="M11.1 12.08c-2.33-4.51-.5-8.48.53-10.07C6.27 2.2 1.98 6.59 1.98 12c0 .14.02.28.02.42.62-.27 1.29-.42 2-.42 1.66 0 3.18.83 4.1 2.15 1.67.48 2.9 2.02 2.9 3.85 0 1.52-.87 2.83-2.12 3.51.98.32 2.03.5 3.11.5 3.5 0 6.58-1.8 8.37-4.52-2.36.23-6.98-.97-9.26-5.41z"/></g><path d="M7 16h-.18C6.4 14.84 5.3 14 4 14c-1.66 0-3 1.34-3 3s1.34 3 3 3h3c1.1 0 2-.9 2-2s-.9-2-2-2z"/></g></g></svg>
          </div>
          
          <div class="button-status">Ready To Arm</div>
          <!-- svg code must be separate -->
        </button>
        <div><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8h5z"/></svg>
     <!-- divider -->     
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 8h-3V6.21c0-2.61-1.91-4.94-4.51-5.19C9.51.74 7 3.08 7 6h2c0-1.13.6-2.24 1.64-2.7C12.85 2.31 15 3.9 15 6v2H4v14h16V8zm-2 12H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"/></svg>
</div>
      <br>
        <button id="disarm" class="mainOptions" style="display: none;"> <!-- This button should only display when the system is armed.-->
          <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="60px" viewBox="0 0 24 24" width="60px" fill="#disarmed" class="disarmed"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><path d="M12,2L4,5v6.09c0,5.05,3.41,9.76,8,10.91c4.59-1.15,8-5.86,8-10.91V5L12,2z M15.5,14.09l-1.41,1.41L12,13.42L9.91,15.5 L8.5,14.09L10.59,12L8.5,9.91L9.91,8.5L12,10.59l2.09-2.09l1.41,1.41L13.42,12L15.5,14.09z"/></g></svg>
          Disarm
        </button>
        
      <button id="armAway" onclick="alertArmAway()" class="mainOptions">
        <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="60px" viewBox="0 0 24 24" width="60px" fill="none" class="arm-away"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><path d="M12,2L4,5v6.09c0,5.05,3.41,9.76,8,10.91c4.59-1.15,8-5.86,8-10.91V5L12,2z M10.94,15.54L7.4,12l1.41-1.41l2.12,2.12 l4.24-4.24l1.41,1.41L10.94,15.54z"/></g></svg>
        <br>
        Arm Away
        </button>
        <button id="armedStay" onclick="alertArmStay()" class="mainOptions">
          <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="60px" viewBox="0 0 24 24" width="60px" fill="none" class="arm-stay"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M17,11c0.34,0,0.67,0.04,1,0.09V6.27L10.5,3L3,6.27v4.91c0,4.54,3.2,8.79,7.5,9.82c0.55-0.13,1.08-0.32,1.6-0.55 C11.41,19.47,11,18.28,11,17C11,13.69,13.69,11,17,11z"/><path d="M17,13c-2.21,0-4,1.79-4,4c0,2.21,1.79,4,4,4s4-1.79,4-4C21,14.79,19.21,13,17,13z M17,14.38c0.62,0,1.12,0.51,1.12,1.12 s-0.51,1.12-1.12,1.12s-1.12-0.51-1.12-1.12S16.38,14.38,17,14.38z M17,19.75c-0.93,0-1.74-0.46-2.24-1.17 c0.05-0.72,1.51-1.08,2.24-1.08s2.19,0.36,2.24,1.08C18.74,19.29,17.93,19.75,17,19.75z"/></g></g></svg> 
          <br>
          Arm Stay
        </button>
        <button id="armCustom" onclick="custom_arm" class="mainOptions">
          <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="60px" viewBox="0 0 24 24" width="60px" fill="#000000" class="arm-away-bypass"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M3,17.25V21h3.75L17.81,9.94l-3.75-3.75L3,17.25z M21.41,6.34l-3.75-3.75l-2.53,2.54l3.75,3.75L21.41,6.34z"/></g></g></svg>
          Arm Custom
        </button>
        <button class="mainOptions" id="settings" onclick="openSettings()">
          <svg xmlns="http://www.w3.org/2000/svg" height="60px" viewBox="0 0 24 24" width="60px" fill="#FFFFFF" class="settings"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19.44 12.99l-.01.02c.04-.33.08-.67.08-1.01 0-.34-.03-.66-.07-.99l.01.02 2.44-1.92-2.43-4.22-2.87 1.16.01.01c-.52-.4-1.09-.74-1.71-1h.01L14.44 2H9.57l-.44 3.07h.01c-.62.26-1.19.6-1.71 1l.01-.01-2.88-1.17-2.44 4.22 2.44 1.92.01-.02c-.04.33-.07.65-.07.99 0 .34.03.68.08 1.01l-.01-.02-2.1 1.65-.33.26 2.43 4.2 2.88-1.15-.02-.04c.53.41 1.1.75 1.73 1.01h-.03L9.58 22h4.85s.03-.18.06-.42l.38-2.65h-.01c.62-.26 1.2-.6 1.73-1.01l-.02.04 2.88 1.15 2.43-4.2s-.14-.12-.33-.26l-2.11-1.66zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/></svg>
          <br>
          Settings
        </button>
          <button class="mainOptions" id="open-notificationsMAIL">
            <svg xmlns="http://www.w3.org/2000/svg" height="60" viewBox="0 96 960 960" width="60" fill="#MAIL" class="MAIL"><path d="M80 896V256h800v640H80Zm400-302L140 371v465h680V371L480 594Zm0-60 336-218H145l335 218ZM140 371v-55 55Z"></path></svg>
            <br>
            Message
            <span class="message-value">(0)</span>
          </button>
      <svg style="position:absolute;" aria-hidden="true" focusable="false">
  <linearGradient id="arm" x2="0" y2="1">
    <stop offset="0%" stop-color="#eb0505"></stop>
    <stop offset="100%" stop-color="#bd1313"></stop>
  </linearGradient>
</svg>
        
        <svg style="position:absolute;" aria-hidden="true" focusable="false">
  <linearGradient id="settingsother" x2="0" y2="1">
    <stop offset="0%" stop-color="#c0c0c0"></stop>
    <stop offset="100%" stop-color="#595959"></stop>
  </linearGradient>
</svg>
      
        <svg style="position:absolute;" aria-hidden="true" focusable="false">
  <linearGradient id="wifiOption" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#b6c2c8"></stop>
    <stop offset="100%" stop-color="#87dce8"></stop>
  </linearGradient>
</svg>
          
        <style id="helpQuestion">
         .help {
  /* gradient and fallback color */
           fill: url(#help) #5BFDFD;
            }
    </style>
        
        <svg style="position:absolute;" aria-hidden="true" focusable="false">
  <radialGradient id="help" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#0000ff"></stop>
    <stop offset="100%" stop-color="#000088"></stop>
  </radialGradient>
</svg>       <br><br>
      <div class="bottom-buttonMenu" id="bottom-buttons">
        <button>Zones</button>
        <button>Scenes</button>
        <button>Automation</button>
        <button onclick="openSystemStatusMenu();">System</button>
        <button>Tools</button>   
        <div class="windows">
          <div class="helpPage" style="display: none;">
            <h1 class="title">Help</h1>
            <p>Choose the status that is showing on the system.</p>
            <details>
              <summary>AC Loss</summary>
              <criteria></criteria>
              Automatic Current power to the system has been lost.<br> Check the system battery and restore the power. See video below. <br><br>
              <iframe width="560" height="315" src="https://www.youtube.com/embed/8PPf5NHPN9U" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
            </details><br>
            <details></details><br>
            <details></details><br>
            <details></details><br>
            <details></details><br>
            <details></details><br>
          </div>
           </div>
        </div>
        </div>
        <footer id="footer" class="myFooter">
          <button id="delay">Delay</button>
         &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
          <iframe src="https://free.timeanddate.com/clock/i82y1s0q/n784/fn3/fs18/fcfff/tct/pct/ahr/ts1" frameborder="0" width="55" height="22" allowtransparency="true"></iframe>
          <iframe src="https://free.timeanddate.com/clock/i82y1s0q/n784/fn3/fs18/fcfff/tct/pct/tt1/tw0" frameborder="0" width="136" height="22" allowtransparency="true"></iframe>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
          <button id="back">Back</button>
          
          <br>
        </footer>
    

      </center>
    </head>
  </body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
.header {
  background-image: linear-gradient(to top, #3aa53b, #1dd82a);
  width: 100%;
  height: 35px;
  font-family: 'Bebas Neue', cursive;
}

body {
  background-image: linear-gradient(to right, #2d52ae, #283039, #2d52ae);
  font-family: "Roboto";
  overflow-x: hidden;
  overflow-y: hidden;
}

div[class="system-top-text-readonly-status"] {
  background: transparent; 
  border: none;
  text-align: center;
  font-family: "Arial", sans-serif;
  font-size: 26px;
  display: block;
  box-sizing: border-box;
  box-shadow: 0px 4px 16px #3aa53b;
}

button[id="system-status"] {
  background: transparent;
  border: none;
}
.armscreen {
  background-color: #011935;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}
.keypad-code-number {
  color: #9ABCE1;
  background-color: #031322;
  border: 2px solid white;
}
.armscreen-mode-text {
  color: #ffffff;
}
.back-button{
  
}
.arm-code-entry {
  width: 70px;
}
.mainOptions {
  border: 1px solid #e3e3e3;
  border-radius: 2px;
background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(215,210,204,0.25) 89%);
  color: #fff;
  width: 92px;
  height: 92px;
  user-select: none;
  box-sizing: border-box;
  cursor: pointer;
}
#wifi {
  background-color: #1e2028;
  border-top: 3px solid #1e2028;
  border-left: 3px solid #1e2028;
  border-right: 3px solid #1e2028;
  border-bottom: 3px solid #2d3952;
  border-radius: 4px;
}
#wifi:active {
  background-color: #4c4f5d;
}
footer#footer.myFooter {
  background-image: linear-gradient(#2f2f31, #28457e);
  width: 100%;
  height: 23px;
  position: absolute;
  bottom: 0;
}
#delay, #back {
  background-image: LINEAR-GRADIENT(to top, #1782d2, #a5dff3);
  border: 2px solid black;
  border-radius: 6px;
}
div[class="cover"] {
  background-color: white;
}
iframe {
  user-select: none;
}
#helpButton {
  background-color: #bbd2e6;
  border-top: 3px solid #b1e2e5;
  border-left: 3px solid #bbd2e6;
  border-right: 3px solid #bbd2e6;
  border-bottom: 3px solid #bbd2e6;
  border-radius: 2px;
  float: right;
  cursor: pointer;
  width: 70px;
  align-items: center;
  display: none;
}
.bottom-buttonMenu {
  width: 270px;
  white-space: nowrap;
  overflow-x: scroll;
}
.emergency-icons {
  float: right;
  
}
button#emergency {
  background-color: #000000
}
div[class="password-check"] p[class="wrong"] {
  color: #c63023;
}
button.mainOptions:disabled {
  /* background-color: #4a4a4a; */
  opacity: 25%;
  /* color: #000000; */
  cursor: default;
  box-sizing: border-box;
}
.configuration-settings{
  background-color: #011935;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

p#button-space {
  line-height: 1.6;
}

.wired, .unwired {
  display: none;
}

body.online .wired {
  display: block;
}

body.offline .unwired {
  display: block;
}
body.offline .wired {
  display: none;
}

function openSettings() {

            var btn = document.getElementById("settings");
            //this is what you're looking for
            var x = document.getElementById("configuration-settings");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }

function armstatus {
  document.getElementByClassName("button-status").innerHTML = "Exit Now" + time + "Seconds"
}

// Code for Wi-Fi Sign on network settings button starts
function updateConnectionStatus(msg, connected) {
  if (connected) {
    document.body.className = "online";
  } else {
    document.body.className = "offline";
  }
}

window.addEventListener('load', function(e) {
  if (navigator.onLine) {
    updateConnectionStatus('Online', true);
  } else {
    updateConnectionStatus('Offline', false);
  }
}, false);

window.addEventListener('online', function(e) {
  updateConnectionStatus('Online', true);
}, false);

window.addEventListener('offline', function(e) {
  updateConnectionStatus('Offline', false);
}, false);

I tried using code from an answer from another question but it didn't work. It seems document.getElementById("elementID").style.display = "block" only works sometimes.

Please read https://stackoverflow.com/help/minimal-reproducible-example with an emphasis on the minimal. Also, you can use your browsers devtools inspect facility to see whether there are syntax errors reported in the console. — A Haworth, Jun 11 '23 at 05:44
Hasn't this been answered before? https://stackoverflow.com/questions/6019845/show-hide-div-on-click-with-css — AnonymousUser, Jun 12 '23 at 10:23
Does this answer your question? [How can I hide/show a div when a button is clicked?](https://stackoverflow.com/questions/16308779/how-can-i-hide-show-a-div-when-a-button-is-clicked) — AnonymousUser, Jun 12 '23 at 10:24

score 1 · Accepted Answer · answered Jun 11 '23 at 01:20

1

To make a div disappear/reappear on a button click event, you can utilize the css property of display: none, and JavaScript's toggle method.

Here is an example of the functionality you want in your website:

const divToToggle = document.getElementById('exampleDiv');

function toggleDiv() {
    divToToggle.classList.toggle('hideClass');
}

#exampleDiv {
  border: 2px solid black;
  height: 100px;
  width: 100px;
}

.hideClass {
  display: none;
}

<div id="exampleDiv">
  <h1>Test</h1>
</div>

<button onClick="toggleDiv()">Hide/Show Div</button>

answered Jun 11 '23 at 01:20

OK, that code worked, but how do I apply that to my current code? – Christian Samu Jun 11 '23 at 17:11
@ChristianSamu Well you have a button to hide a div, so what you want to do is use the same JS code I did but select your div, and when that button is clicked, apply `display: none;` to that div. – Jun 11 '23 at 17:13

How to make a div show when a button is clicked

1 Answers1