jQuery plugin for presenting UI in sections, one section at a time, each section being full width and full height, arranged horizontally or vertically. See example to appreciate its simplicity and beauty.

Sectionizr helps you present a rather bulky UI in a more friendly way, giving room for enough space for viewer comfort, and allowing them focus on what's important - overall, you can use sectionizr to break your UI into linked sections

Sectionizr by default arranges your <section></section>'s horizontally, add 'vertical' class to a sectionizr to make it's sections stack vertically. Sections in a sectionizr have to really be <section></section>

Sectionizr depends on its sectionizr.css stylesheet to render the sections in such a way that they are compliant with the library's operations, so unless you've got an even cooler way to style them up (arrange them), ensure to include the file on your page

<link rel="stylesheet" href="path/to/sectionizr.css">

Include the script (1KB, compressed) in your project (node compatible also). Note that jQuery must be present on the same page.

<script src="path/to/sectionizr[.min].js"></script>

Once all dependencies are in place, you need to initialize sectionizr on corresponding elements in the DOM

let controlla = $('.sectionizr').sectionizr();

Remember to keep a pointer to your sectionizr object - that's how you control the sectionized contents of your page.

If you have multiple (or nested) sectionizr's on the same page which share the same selector (e.g class name), Sectionizr will initialize them all and return an array, so you may store them like this

let [controlla1, controlla2] = $('.sectionizr').sectionizr();

In the event that you need to fetch your sectionizr later on in the code (and you maybe forgot to initially keep a pointer to it as strongly advised above) you can retrieve the sectionizr object attached to the specifc DOM element it was initialized on. For example

<div class="sectionizr">
    <section></section>
    <section></section>
</div>

// for some strange reason, you do not assign the returned sectionizr object
$('.sectionizr').sectionizr();

// fret not, it's still there
var lateControlla = $('.sectionizr')[0].sectionizr;

Note that .sectionizr in the last example does not require parentheses, that's because it's not a function, it's merely the sectionizr object attached to its owner in the DOM.

Now that you have your controlla, you can begin to control the sectionized content. Available methods are shown in the table below:

with love from @mofesolapaul