Slide-down Switch to Russian

View the Project on GitHub b2bcenter/slide-down

Slide Down

Each jQuery plugin to display blocks can do it differently. It’s essential for sliding blocks, which are obviously "sliding" and shifting content.

Demo

Animation types

Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices mi sed purus suscipit pulvinar. Donec elementum condimentum odio, tempor egestas sapien tincidunt ac. Donec non lacus metus. Phasellus at tellus tristique, pulvinar felis quis, molestie diam. Aliquam ut ipsum in libero malesuada pulvinar. Nunc quam odio, condimentum vel arcu eu, posuere dapibus nisl. Fusce laoreet vel lacus non imperdiet. Etiam iaculis, neque eu laoreet maximus, ligula odio tempus justo, sit amet pulvinar ex ligula a ante. Duis hendrerit efficitur gravida. Donec viverra tortor semper nisi ullamcorper luctus. Duis rutrum, eros id pretium rhoncus, leo ex ultricies tellus, a imperdiet odio lorem vel mi. Morbi gravida augue at interdum venenatis. Nam eget mi ut lorem condimentum iaculis vel at nunc. Suspendisse vehicula lorem vel metus mollis, eget consequat turpis tempor.

Ease-Fast

Maecenas ut interdum est, nec ullamcorper sapien. Sed mattis tempor molestie. Integer eleifend magna at massa euismod aliquet. Cras scelerisque elementum justo, non tristique sem accumsan a. Quisque vulputate viverra posuere. Suspendisse potenti. Proin dictum vel enim vitae faucibus. Cras elementum, mauris non mollis porttitor, risus mi posuere ex, ut rutrum eros mauris nec neque. Phasellus molestie dui quis tellus lobortis, nec consectetur mauris maximus. Praesent vestibulum felis sit amet urna ornare, non fringilla nunc tempor. Praesent feugiat ultrices justo, in varius lorem placerat eget.

Ease-Slow

Etiam id tortor at purus pulvinar lobortis. In hac habitasse platea dictumst. Donec tincidunt justo eu bibendum semper. In sit amet mauris porttitor, congue leo et, pretium magna. Sed porta, ligula sed facilisis posuere, dui leo mollis est, quis vulputate sem turpis sit amet mauris. Etiam laoreet ac nunc non dignissim. Aenean non egestas libero. Ut rhoncus justo eget nisi convallis, ut lobortis nisi imperdiet. Nunc eleifend, libero vel dignissim cursus, purus libero tempor lorem, sit amet blandit erat ipsum ut arcu. Suspendisse sit amet porttitor velit. Maecenas fermentum gravida nulla ullamcorper luctus. Aenean vehicula eros quis ultrices interdum. Aenean suscipit ultrices lobortis. Praesent eu tellus lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam quis tortor non turpis dictum venenatis.

Bounce

Vivamus vitae dolor ut nibh hendrerit posuere sed nec mi. Fusce egestas, felis iaculis tincidunt gravida, erat purus facilisis justo, sed pretium dui nulla ac nulla. Phasellus ac ante sollicitudin, efficitur magna eu, faucibus ligula. Donec et dignissim elit. Nulla erat orci, suscipit sit amet cursus ac, ultricies et leo. Etiam tempor odio et lacus porta ornare. Maecenas gravida tincidunt turpis id porta.

Extend trigger

Bounce-Fast

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat justo eget risus laoreet imperdiet. Nunc molestie vitae dui congue tempor. Cras sodales nunc vel augue fermentum, eget sodales tellus elementum. Maecenas at accumsan massa, et sodales urna. In ullamcorper eget lorem et laoreet. Mauris varius tellus ut dui porttitor, sit amet consequat turpis eleifend. Sed consequat tincidunt pretium. Quisque blandit eros commodo, euismod lorem vitae, pharetra justo. Duis pellentesque accumsan mauris ut imperdiet. Nullam at rhoncus orci, ultrices elementum mi. In rhoncus, diam a euismod semper, lacus lacus lacinia nisl, eu suscipit turpis nulla et nisi. Nunc faucibus lobortis sollicitudin.

Bounce-Slow

Nullam interdum nec mauris eu blandit. Suspendisse consequat sollicitudin velit, quis blandit dolor dignissim sit amet. Praesent rhoncus nisi sit amet orci maximus, sit amet fermentum leo placerat. Maecenas mollis, urna in lobortis tincidunt, justo odio ullamcorper ante, at volutpat sem metus sed mi. Donec venenatis felis sit amet pellentesque sodales. Cras sit amet iaculis ipsum. Donec a turpis diam. Nulla pharetra feugiat est, sed cursus sem. Sed ac leo vel mi finibus pulvinar ut quis turpis. Ut eget consequat risus, ac eleifend sapien. Cras tincidunt sapien eu risus euismod feugiat. Duis pulvinar enim eu varius aliquet. Aliquam volutpat, metus ut aliquam commodo, arcu turpis suscipit massa, vel dictum quam nibh in augue.

Synchronized blocks

Sync block

Aliquam luctus ante urna, id semper ipsum euismod varius. Sed vel mauris vestibulum, feugiat tellus non, pharetra felis. Donec accumsan malesuada gravida. Etiam dignissim lacus et molestie congue. Ut vel accumsan ligula. Quisque nulla ante, pharetra quis magna a, varius convallis est. Fusce vel porttitor sem. Quisque quis consequat odio, id placerat urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In facilisis libero auctor nunc imperdiet tristique. Phasellus pellentesque velit nulla, in elementum leo ornare eget. Quisque laoreet efficitur nibh ac bibendum. Aenean malesuada porttitor mauris, sit amet porttitor orci congue sit amet. Vivamus in bibendum metus. Donec faucibus elit ac fringilla viverra. Etiam sit amet velit mauris.

Sync block with ease-fast

Maecenas dictum rutrum ante, sit amet accumsan dui. Cras eget luctus erat. Pellentesque in finibus lectus, nec pretium nulla. In hendrerit elementum neque, a egestas ante efficitur sit amet. Suspendisse ullamcorper molestie mi, sit amet sodales quam tincidunt eget. Morbi cursus ac velit ut tempus. Sed lobortis et lectus ac sodales. Quisque ullamcorper justo eu varius ultrices.

Installation

Use Bower:

$ bower install slide-down

Or npm

$ npm install slide-down

If the above methods do not work, download from GitHub

Setup 

<!--  Css -->
<link href="⁄jquery.slidedown.css" rel="stylesheet" type="text/css">
<!-- jQuery -->
<script src="⁄jquery.min.js"></script>
<!-- SlideDown -->
<script src="⁄jquery.slidedown.js"></script>

Markup 

<!-- The trigger can exist anywhere. -->
<!-- Block name (that can be open/close) is specified
     in the attribute [data-slidedown-trigger] -->
<span data-slidedown-trigger="txt">Текст</span>

<!-- Sliding block can also exist anywhere,
     Regardless of the trigger -->
<!-- Block name the trigger refers to is specified
     in the attribute [data-slidedown-target] it  -->
<div class="slide_down" data-slidedown-target="txt">
    <div class="slide_down-content">
        <!-- Контент -->
    </div>
</div>

Options

Open block

If an open block is required on default, you should add the .slide_down--active class to the block with the [data-slidedown-target] attribute

Animation

The basic animation can be modified. Do this requires adding [data-animation] , that will indicate the type and speed of the animation, a data-slidedown-target block:

<!-- Sliding block -->
<div class="slide_down"
     data-slidedown-target="txt"
     data-animation="ease-slow">
    <div class="slide_down-content">
        <!-- Content -->
    </div>
</div>

Synchronicity

If you want the blocks to be interdependent (only one block can always be opened), it’s necessary to add a [data-sync] attribute to each dependent block with the [data-slidedown-target] attribute

<!-- One sliding block -->
<div class="slide_down" data-slidedown-target="txt" data-sync>
    <div class="slide_down-content">
        <!-- Content -->
    </div>
</div>

<!-- The 2nd sliding block -->
<div class="slide_down" data-slidedown-target="txt" data-sync>
    <div class="slide_down-content">
        <!-- Content -->
    </div>
</div>

Methods 

// This will open an assigned block
$.slideDown.open("id or $('element')");
// This will close an assigned block
$.slideDown.close("id or $('element')");
// This will close all or all assigned blocks
$.slideDown.closeAll("empty or $('elements')");

Browsers

CSS3 animation is used. If the browser does not support animation, the blocks will be shown as hide / show

license

MIT