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="ybx-form-container col-xs-12 col-sm-4 col-md-6 col-lg-4 col-xl-2">
          <div class="code">
            <div class="row">
              <div class="col-sm-3">

                
<div class="ResourceIconUploaderWidget ui-yakabox-iconUploaderWidget IconUploaderWidgetProcessed" style="width:50px; height:50px; text-align:center;">
	    	      	<img class="IUWThumbnail ui-yakabox-iconUploader-icon" id="IUWThumbnail_6::Acceptance_Test" src="https://yakabod.yakabox.com/images/userupload/resourcetype/thumbnail_Acceptance_Test.jpg?v=20200410" alt="Object Icon" style="max-width:50px; max-height:50px;">
           
	  	 	        <a href="" onclick="return false;" id="IUWEdit_6::Acceptance_Test" class="btn btn-primary btn-xs" title="Edit Icon" style="left:1px;"><span class="fa fa-pencil"></span> Edit</a>
        

  
  <div id="iconDelayMsg6::Acceptance_Test" style="display: none;" class="ui-state-highlight"> New icon may take a few minutes to appear throughout the site. </div>
  </div>

              </div>
              <div class="col-sm-9" style="overflow: hidden; text-overflow: ellipsis;">
                <h4 style="overflow: hidden; text-overflow: ellipsis;">Acceptance Test</h4>
              </div>
            </div>
            <div class="btn-toolbar">
              <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group" style="padding:10px 0">
                <a href="#" class="btn btn-default btn-md" role="button" onclick="window.editForm('35', '6', 'RESOURCE')" title="Edit Form"><i class="fa fa-pencil"></i>
                 ...

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"...