responsive
1.2.6

Scrollbars

Table of contents:

A few words about scrollbars

jAccordion supports scrollbars inside slides using additional class jAccordion-scrollbars or jAccordion-scrollbar. Only scrollbar of active slide whose content is long enough is displayed, while scrollbars of inactive slides are hidden. Orientation of scrollbars is determined by orientation of jAccordion, i.e. horizontal accordion can use only horizontal scrollbars and vertical accordion can use only vertical scrollbars.

Scrollbar inside every slide

Demonstration of accordion with scrollbars displayed inside every slide (if necessary).

Content of this slide is long enough to display scrollbar.

Vestibulum ut elit id nulla tincidunt iaculis. Maecenas venenatis, urna eget pulvinar imperdiet, enim felis tincidunt eros, quis elementum sem risus a diam. Nulla facilisi. Ut id sapien quis est molestie varius. Aenean consectetur, arcu vitae porta rutrum, arcu nunc porttitor est, a facilisis tortor nibh quis sem. Morbi rutrum nibh nec ipsum suscipit pretium. Fusce id augue eu orci rhoncus pulvinar. Vestibulum at risus dapibus neque cursus porttitor. Nullam hendrerit pharetra eros ut tincidunt.

Content of this slide doesn't exceed allowed space so scrollbar is not necessary.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Content of this slide is long enough to display scrollbar.

Donec tincidunt, leo et dapibus vehicula, risus justo suscipit tellus, vitae malesuada dolor turpis vitae elit. Maecenas dictum interdum justo, ornare rhoncus odio porta eu. Donec fringilla erat sit amet quam cursus at aliquet purus varius. Praesent congue interdum justo, eget facilisis ipsum elementum hendrerit. Suspendisse ut justo pharetra augue elementum eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi eu nisl purus. Integer et rutrum tortor. Maecenas viverra ipsum a erat mollis adipiscing.

Content of this slide is long enough to display scrollbar.

Aliquam erat volutpat. Proin consectetur, mauris sit amet sagittis tempus, sapien urna fringilla risus, tincidunt malesuada sem sapien eget nisl. Cras nisi ante, vestibulum eu vestibulum a, porta nec massa. Donec elementum bibendum consequat. Proin iaculis, massa in commodo pretium, tellus ipsum fermentum elit, vel iaculis libero lacus in arcu. Vestibulum sagittis erat ac dui dignissim ultrices. Nulla rhoncus sem eget nisi pharetra non molestie magna vulputate. Vivamus ultricies tempus dui quis ullamcorper. Sed eu tortor in turpis sagittis rhoncus scelerisque eget neque. Quisque libero orci, facilisis sed hendrerit a, consectetur et augue. Integer turpis arcu, commodo sit amet congue commodo, sagittis in mi. Sed vitae magna ipsum, a lobortis lorem. Aenean bibendum felis in lectus dapibus in adipiscing tortor eleifend. Sed tempus, urna quis venenatis ullamcorper, turpis mauris posuere turpis, nec lacinia sapien nisl id lectus. Donec varius suscipit arcu ac consequat. Curabitur condimentum, sapien sed ullamcorper interdum, nisl dui consequat turpis, quis cursus lacus nunc id dolor.

Scrollbar can be displayed in every slide (if content is long enough) by adding class jAccordion-scrollbars to jAccordion container.

Example of jAccordion with scrollbars inside every slide:

<div class="accordion jAccordion-scrollbars noJS">
	<div class="jAccordion-slidesWrapper">
		<div class="jAccordion-slide"><!--Content of slide1 - scrollbar is displayed if content is long enough--></div>
		<div class="jAccordion-slide"><!--Content of slide2 - scrollbar is displayed if content is long enough--></div>
		<div class="jAccordion-slide"><!--Content of slide3 - scrollbar is displayed if content is long enough--></div>
		<div class="jAccordion-slide"><!--Content of slide4 - scrollbar is displayed if content is long enough--></div>
	</div>
</div>

Scrollbar inside a specific slide

Demonstration of accordion with scrollbars displayed inside particular slides (if necessary).

Content of this slide is long enough to display scrollbar.

Vestibulum ut elit id nulla tincidunt iaculis. Maecenas venenatis, urna eget pulvinar imperdiet, enim felis tincidunt eros, quis elementum sem risus a diam. Nulla facilisi. Ut id sapien quis est molestie varius. Aenean consectetur, arcu vitae porta rutrum, arcu nunc porttitor est, a facilisis tortor nibh quis sem. Morbi rutrum nibh nec ipsum suscipit pretium. Fusce id augue eu orci rhoncus pulvinar. Vestibulum at risus dapibus neque cursus porttitor. Nullam hendrerit pharetra eros ut tincidunt.

Displaying of scrollbar is disabled for this slide.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Displaying of scrollbar is enabled for this slide.

Displaying of scrollbar is enabled but content doesn't exceed the allowed space so scrollbar is not displayed.

Displaying of scrollbar is disabled for this slide.

Aliquam erat volutpat. Proin consectetur, mauris sit amet sagittis tempus, sapien urna fringilla risus, tincidunt malesuada sem sapien eget nisl. Cras nisi ante, vestibulum eu vestibulum a, porta nec massa. Donec elementum bibendum consequat. Proin iaculis, massa in commodo pretium, tellus ipsum fermentum elit, vel iaculis libero lacus in arcu. Vestibulum sagittis erat ac dui dignissim ultrices. Nulla rhoncus sem eget nisi pharetra non molestie magna vulputate. Vivamus ultricies tempus dui quis ullamcorper. Sed eu tortor in turpis sagittis rhoncus scelerisque eget neque. Quisque libero orci, facilisis sed hendrerit a, consectetur et augue. Integer turpis arcu, commodo sit amet congue commodo, sagittis in mi. Sed vitae magna ipsum, a lobortis lorem. Aenean bibendum felis in lectus dapibus in adipiscing tortor eleifend. Sed tempus, urna quis venenatis ullamcorper, turpis mauris posuere turpis, nec lacinia sapien nisl id lectus. Donec varius suscipit arcu ac consequat. Curabitur condimentum, sapien sed ullamcorper interdum, nisl dui consequat turpis, quis cursus lacus nunc id dolor.

Scrollbar can be displayed in a specific slide (if content is long enough) by adding class jAccordion-scrollbar to the slide.

Example of jAccordion with scrollbars inside 1st and 3rd slide:

<div class="accordion noJS">
	<div class="jAccordion-slidesWrapper">
		<div class="jAccordion-slide jAccordion-scrollbar"><!--Content of slide1 - scrollbar is displayed if content is long enough--></div>
		<div class="jAccordion-slide"><!--Content of slide2 - scrollbar is never displayed--></div>
		<div class="jAccordion-slide jAccordion-scrollbar"><!--Content of slide3 - scrollbar is displayed if content is long enough--></div>
		<div class="jAccordion-slide"><!--Content of slide4 - scrollbar is never displayed--></div>
	</div>
</div>

jAccordion by maniacpc, exclusively for CodeCanyon