jQuery Header Slider Library For The Header Content Slide | jqHeaderSlider

jQuery header slider is a jQuery plugin for creating expandable and collapsible content sections where users can switch the visibility of your content by clicking on the corresponding title elements.

jquery carousel slider example, jquery banner slider free download, jquery image slider free download with source code, jquery slider plugin

How to make use of it:

1. Download and put the jqHeaderSlider.js JavaScript library after loading the most recent jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jqHeaderSlider.js"></script>

2. Divide your content down into a number of sections through the use of heading components.

<div class="container">
  <h1>jqHeaderSlider Plugin Example</h1>
  <p>A jQuery plugin to create expandable and collapsible content sections where users are able to toggle the visibility of your content by clicking its corresponding heading elements like h1, h2, h3, ...</p>
  <h2>This is section two</h2>
  <p>Click The Header To Collapse/Expand Me.</p>
  <h3>This is section three</h3>
  <p>Click The Header To Collapse/Expand Me.</p>
  <h4>This is section four</h4>
  <p>Click The Header To Collapse/Expand Me.</p>
  <h5>This is section five</h5>
  <p>Click The Header To Collapse/Expand Me.</p>
  <h6>This is section siz</h6>
  <p>Click The Header To Collapse/Expand Me.</p>
</div>

3. Call the plugin on the top container and complete it.

window.header_slider($('.container').first(), {
  // options here
});

4. Determine the font color of the heading components.

window.header_slider($('.container').first(), {
  color: '#4F46E5'
});

5. Determine whether or not to collapse all sections on the web page load.

window.header_slider($('.container').first(), {
  closed_by_default: true
});

Create Collapsible Content By Heading, jQuery header slider Plugin/Github


See Demo And Download

Official Website(hamedgasemi200): Click Here

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

Share