Bootstrap Panel

by chrischilcoat

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">

<div class="container">
  <div class="col-sm-12 text-center">
    <br/>
    <div class="alert alert-info">UX Note: The following should be added to a new tab in the form edit dialog called "Visibility"</div>
    <br/>
    <p>Visibility settings enables you to decide when to show and hide a form field.</p>
    <br/>
  </div>
  <div class="col-sm-6">
  


 <div class="panel panel-default" style="">
    <div class="panel-body text-center text-default">
      <span>Visible</span>
    </div>
    <div class="panel-body bg-success text-center">
      <span class="fa fa-fw  fa-eye fa-5x" style="
    display: inline-block;
"></span> <span class="fa fa-fw fa-plus fa-xs" style="
    display: inline-block;
    vertical-align: text-center;
    vertical-align: top;
    margin-top: 31px;
    margin: 31px 15px;
"></span> <span class="fa fa-fw  fa-plus-circle fa-5x" style="
    display: inline-block;
"></span>
    </div>
     <div class="panel-body">
      <p><strong>Add</strong></p>
      <p class="desc">This field is visible when a new Backlog Item is being added.</p>
    </div>
    <div class="panel-body text-center">
      <button class="btn btn-default btn-block">
      Hide on Add
      </button>
    </div>
  </div>
  
  </div>
    <div class="col-sm-6">
  


  <div class="panel panel-default">
    <div class="panel-body text-center text-default">
      <span>Visible</span>
    </div>
    <div class="panel-body bg-warning text-center">
      <span class="fa fa-fw fa-eye fa-5x" style="
    display: inline-block;
"></span> <span class="fa fa-fw fa-plus fa-xs" style="
    display:...

CSS

body {padding:20px}

JavaScript

(function($) {
  'use strict';
  $.fn.extend({
    setupPanel: function() {
      return this.each(function() {
        var $this = $(this),
            $window = $(window),
            $btnToggleVisibility = $this.find('.btn'),
            isVisible = 'false',
            togglePanelVisibility = function() { 
              if (isVisible == 'true') {
                isVisible = 'false'; 
                $this.removeAttr('style');
                $this.find('.text-default').text('Visible');
                $this.find('.fa-eye-slash').removeClass('fa-eye-slash').addClass('fa-eye');
                $this.find('.desc').text(function () {
                    return $(this).text().replace("hidden", "visible");
                });
                $this.find('.btn').text(function () {
                    return $(this).text().replace("Show", "Hide");
                });
                
                $('.js-eyeslash').hide().tooltip('hide').data( "original-title", '' );
                

                
              } else {
                isVisible = 'true';
                $this.css('opacity', '.6' );
                $this.find('.text-default').text('Hidden');
                $this.find('.fa-eye').removeClass('fa-eye').addClass('fa-eye-slash');                
                $this.find('.desc').text(function () {
                    return $(this).text().replace("visible", "hidden");
                });
                $this.find('.btn').text(function () {
                    return $(this).text().replace("Hide", "Show");
                }); 
                
               
                
                if ($this.find('.btn:contains("Edit")').length > 0) {
                  if ($('.js-eyeslash').data( "original-title" ) == '') {
                    var t = "Hidden on Edit"
                  }
                  
                }
                if ($this.find('.btn:contains("Add")').length > 0) {
                  if ($('.js-eyeslash').data( "original-title"...