Get started with jquery-expander CDN

MIT licensed

Libraries like jQuery Expander hide/show HTML content with a click.

Tags:
  • jquery-plugin
  • text
  • truncate
  • summary
  • details
  • expand
  • collapse

Stable version

Copied!

How to start using jquery-expander CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with jquery-expander CDN - cdnhub.io</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.cdnhub.io/jquery-expander/2.0.2/jquery.expander.min.js"></script>
  <script>
    $(function() {
      $('.expander').expander();
    });
  </script>
  <style>
    .expander {
      border: 1px solid #ccc;
      padding: 10px;
      cursor: pointer;
    }
    .expander:hover {
      background-color: #f5f5f5;
    }
    .expander .panel {
      display: none;
    }
  </style>
</head>
<body>
  <button class="expander">Click to expand
    <div class="panel">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisi quis scelerisque blandit, tortor nibh egestas justo, a fermentum velit mauris sit amet nibh. Donec sodales sit amet eros. Suspendisse potenti. Nullam id felis et ante imperdiet commodo. Nullam quis ante. Etiam sit amet orci eget ipsum lacinia bystro.</div>
  </button>
</body>
</html>

All versions