parte is a jQuery based plugin, when used in page settings an icon will be added to the page and from it, you can hide/show sections of the page.

It is fully responsive, you only need to include Jquery and Bootstrap.

hide and show div using javascript with example, onclick show div and hide other div, javascript showhide div onclick toggle, javascript showhide div on click, js hide element

How to make use of it:

1. Load jQuery parte.js plugin files and other resources into 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 a CSS class part to the target elements and specify the taxonomy 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 parte.js plugin.

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

4. Adjust the space between the floating panel and the top of the page.

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

5. Customize the switch.

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

6. Run a function every time an item is hidden or shown.

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

Hide & Show Specific Elements Using jQuery, parte Plugin/Github, css showhide div on click, hide and show in javascript, show hide div jquery

See Demo And Download

Official Website(laythm): Click Here

This superior jQuery/javascript plugin is developed by laythm. For extra Advanced Usages, please go to the official website.