Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<title>Apply Function if Hidden</title>
<meta charset='utf-8'>
<meta name='viewport' content='initial-scale=1.0'>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
</head>
<body>
  <span class="select-tool">Select</span>
  <span class="div-tool">Div</span>
  <span class="image-tool">Image</span>
  <span class="table-tool">Table</span>
  
  <p>
    <div class="starter-properties">Starter</div>
    <div class="canvas-properties">Canvas</div>
    <div class="select-properties">Select</div>
    <div class="div-properties">Div</div>
    <div class="image-properties">Image</div>
    <div class="table-properties">Table</div>
  </p>
</body>
</html>
 
$(document).ready(function() {
  $(".select-tool, .div-tool, .image-tool, .table-tool, .edit-tool").on("mouseup touchend", function() {
    if ($(".select-properties, .div-properties, .image-properties, .table-properties").is(':hidden')) {
      $(".starter-properties, .canvas-properties").show();
      $(".select-properties, .div-properties, .image-properties, .table-properties").hide();
    }
  });
  
  // Select Tool
  $('.select-tool').click(function() {
    $(this).toggleClass('select-active');
    if ($('.select-active').is(':visible')) {
      $(".starter-properties, .canvas-properties, .image-properties, .div-properties, .table-properties").hide();
      $(".select-properties").show();
      if ($('.image-active, .div-active, .table-active, .edit-active').is(':visible')) {
        $('.image-active, .div-active, .table-active, .edit-active').trigger('click');
      }
    } else {
      return false;
    }
  });
  
  // Div Tool
  $('.div-tool').click(function() {
    $(this).toggleClass('div-active');
    if ($('.div-active').is(':visible')) {
      $(".starter-properties, .canvas-properties, .select-properties, .image-properties, .table-properties").hide();
      $(".div-properties").show();
      if ($('.select-active, .image-active, .table-active, .edit-active').is(':visible')) {
        $('.select-active, .image-active, .table-active, .edit-active').trigger('click');
      }
    } else {
      return false;
    }
  });
  
  // Image Tool
  $('.image-tool').click(function() {
    $(this).toggleClass('image-active');
    if ($('.image-active').is(':visible')) {
      $(".starter-properties, .canvas-properties, .select-properties, .div-properties, .table-properties").hide();
      $(".image-properties").show();
      if ($('.select-active, .div-active, .table-active, .edit-active').is(':visible')) {
        $('.select-active, .div-active, .table-active, .edit-active').trigger('click');
      }
    } else {
      return false;
    }
  });
  
  // Table Tool
  $('.table-tool').click(function() {
    $(this).toggleClass('table-active');
    if ($('.table-active').is(':visible')) {
      $(".starter-properties, .canvas-properties, .select-properties, .image-properties, .div-properties").hide();
      $(".table-properties").show();
      if ($('.select-active, .image-active, .div-active, .edit-active').is(':visible')) {
        $('.select-active, .image-active, .div-active, .edit-active').trigger('click');
      }
    } else {
      return false;
    }
  });
  
  $(".select-properties").hide();
  $(".div-properties").hide();
  $(".image-properties").hide();
  $(".table-properties").hide();
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers