Get started with jquery-sidebar CDN

MIT licensed

Creates sliding, collapsible, detachable sidebars with HTML, CSS, and lightweight jQuery library.

Tags:
  • jQuery
  • sidebar
  • simple

Stable version

Copied!

How to start using jquery-sidebar CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with jquery-sidebar CDN - cdnhub.io</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
  <link rel="stylesheet" href="styles.css" />
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.cdnhub.io/jquery-sidebar/3.3.2/jquery.sidebar.min.js"></script>
</head>
<body>
  <div id="sidebar">
    <ul>
      <li><a href="#">Dashboard</a></li>
      <li><a href="#">Users</a></li>
      <li><a href="#">Settings</a></li>
    </ul>
  </div>
  <div id="content">
    <button id="toggle-sidebar">Toggle Sidebar</button>
    <p>Content goes here.</p>
  </div>
  <script>
    $(function() {
      $('#sidebar').sidebar();
      $('#toggle-sidebar').click(function() {
        $('#sidebar').sidebar('toggle');
      });
    });
  </script>
</body>
</html>
Copied!
Copied!

All versions