JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<ul>
    <li>Install</li><li>Options</li><li>Callbacks</li><li>Data-attribute</li><li>Things you might need to know</li>
</ul>



Data-attribute:

Data-attribute can be used if you want to insert element specific options.

E.g. You have 10 moarboxes and you want to use fade effect in one of them.

To use data-attribute, you need to insert it in your primary box ( Primary box is the one that you attach moarbox to ).

For example:

jQuery:
$('.moarbox > div').moarbox();

HTML:
&lt;div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div data-biggerwins="true" data-speedin="200"&gt;&lt;/div&gt;
&lt;/div&gt;


..and in this case the last div would have same default options as all the other divs, just different values for biggerwins and speedin.





Options:

toggletext1: null, // Text string. Shown when primary is visible.
toggletext2: null, // Text string. Shown when secondary is visible.
slide: 'up',       // values: 'up', 'down', 'right', 'left'. 
fade: false,       // When set to true, it overrides sliding and uses fade.
biggerwins: false, // ---
speedin: 400,      // Animation speed when showing secondary box.
speedout: 400,     // Animation speed when hiding secondary box
easein: "swing",   // Easing for showing secondary box.
easeout: "swing",  // Easing for hiding sexondary box.


// Callbacks
// In = Showing secondary box.
// Out = Hiding secondary box.
ready: function() {},      // Plugin is all setup and ready to roll.
eventIn: function() {},    // Event In triggered.
eventOut: function() {},   // Event Out triggered.
animateIn: function() {},  // Animate In ended.
animateOut: function() {}  // Animate Out ended.

CSS

ul {
    margin: 10px;
    text-align: center;
}

li {
    float: left;
    clear:both;
    width: 100px;
    margin: 4px 4px 0px 0px;
    padding: 4px;
    color: #fff;
    background: #444;
    border-radius: 4px;
}