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 desc">
      <span class="desc">Visible on Add</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 text-center">
      <span class="desc ">This field is visible when a new Backlog Item is being added.</span>
    </div>
    <div class="panel-body text-center">
      <div class="btn-group" role="group" aria-label="...">
        <button type="button" class="btn btn-default proto-togglestate">Click to Hide</button>
      </div>
    </div>
  </div>
  
  </div>
    <div class="col-sm-6">
  


  <div class="panel panel-default">
    <div class="panel-body text-center">
      <span class="desc">Visible on Edit</span>
    </div>
    <div class="panel-body bg-success text-center">
      <span class="fa fa-fw fa-eye fa-5x" 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-group'),
            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").replace("Hidden", "Visible")
                });
                $('.js-eyeslash').hide().tooltip('hide').data( "original-title", '' );
                
                
                $this.find('.proto-togglestate').text(function () {
                  return $(this).text().replace("Show", "Hide");
                });
                
                                  
              } 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").replace("Visible", "Hidden");
                });
                
                
                $this.find('.proto-togglestate').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"
                  }
              ...