Hide & Show Specific Elements Using jQuery - parte.js

parte.js is a jQuery plugin for creating a collapsible floating panel where the user can hide & show specific elements within the document by check/uncheck the corresponding checkboxes.

How to use it:

1. Load the jQuery parte.js plugin's files and other resources in the document.

<!-- Required -->
<link rel="stylesheet" href="/path/to/src/css/parte.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/src/js/parte.js"></script>

<!-- Font Awesome Icons -->
<link rel="stylesheet" href="/path/to/cdn/font-awesome/all.min.css" />

2. Add the CSS class parte to the target elements and specify the label name using the data-partename attribute:

<div class="parte" data-partename="User Name">
  <label for="myUsername">Username</label>
  <input type="text" id="myUsername" placeholder="Username">
</div>

<div class="parte" data-partename="User Password">
  <label for="myPassword">Password</label>
  <input type="password" id="myPassword" placeholder="Password">
</div>

<div class="parte" data-partename="User Email">
  <label for="myEmail">Email</label>
  <input type="email" id="myEmail" placeholder="Email" value="[email protected]">
</div>

...

3. Initialize the parte.js plugin and done.

jQuery(function ($) {
  $(".parte").parte({
    // options here ...
  });
});

4. Set the distance between the floating panel and the top of the page. Default: 20.

jQuery(function ($) {
  $(".parte").parte({
    top: '50px',
  });
});

5. Customize the toggle icon. Default: '<i class="fas fa-cogs"></i>'.

jQuery(function ($) {
  $(".parte").parte({
    htmlicon: '<i class="fa fa-cog"></i>'
  });
});

6. Trigger a function every time an element is hidden or shown.

jQuery(function ($) {
  $(".parte").parte({
    onChange: function (element, checked) {
      if(checked)
      {
        $(element).find('input').each(function () { this.value=""});
      }
    },
  });
});

---

This awesome jQuery plugin is developed by laythm. For more Advanced Usages, please check the demo page or visit the official website.