collapsible header slider - Free Download Create Collapsible Content By Heading - jqHeaderSlider

Free Download Create Collapsible Content By Heading – jqHeaderSlider

Posted on

This time I will share jQuery Plugin and tutorial about Create Collapsible Content By Heading – jqHeaderSlider, hope it will help you in programming stack.

collapsible header slider - Free Download Create Collapsible Content By Heading - jqHeaderSlider
File Size: 5.73 KB
Views Total: 60
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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, …

How to use it:

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

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

2. Divide your content down into several sections by using heading elements.

01 <div class="container">
02   <h1>jqHeaderSlider Plugin Example</h1>
03   <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>
04   <h2>This is section two</h2>
05   <p>Click The Header To Collapse/Expand Me.</p>
06   <h3>This is section three</h3>
07   <p>Click The Header To Collapse/Expand Me.</p>
08   <h4>This is section four</h4>
09   <p>Click The Header To Collapse/Expand Me.</p>
10   <h5>This is section five</h5>
11   <p>Click The Header To Collapse/Expand Me.</p>
12   <h6>This is section siz</h6>
13   <p>Click The Header To Collapse/Expand Me.</p>
14 </div>

3. Call the plugin on the top container and done.

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

4. Determine the font color of the heading elements. Default: ‘#3c7dff’.

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

5. Determine whether to collapse all sections on page load. Default: false.

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