jQuery UI Slide

by Dragonseer

HTML

<button id="editButton">Toggle Edit Mode</button>
<div>
    <article>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pulvinar aliquet ante, eu malesuada eros ornare a. Sed eleifend sit amet quam eget vehicula. Fusce viverra bibendum auctor. Quisque sed diam adipiscing, fringilla tortor quis, ullamcorper magna. Integer vel dapibus turpis, sed ullamcorper mauris.
    </article>
    <button id="deleteButton" >Delete</button>
</div>

CSS

div
{
    display: flex;
}

article
{
    width:100%;
    margin: 5px;
}

div button
{
    width:30%;
    margin: 5px;
}

JavaScript

$("#deleteButton").hide();

$("#editButton").click(function()
{
    $("#deleteButton").toggle("slide", { direction: "right" }, 1500);                          
});