Link logic with slide and hide/show?

http://jsfiddle.net/SkiWether/KFmLv/

CSS:
/** Style for the body **/
body {
    font: 12px Tahoma, Arial, Helvetica, Sans-Serif;
}
/** Style for the button & div **/
.myButton {
    padding: .2em 1em;
    font-size: 1em;
}
.mySelect {
    padding: .2em 0;
    font-size: 1em;
}
#myDiv {
    color:Green;
    background-color:#eee;
    border:2px solid #333;
    display:none;
    text-align:justify;
}
#myDiv p {
    margin: 15px;
    font-size: 0.917em;
}
/** Style for the cointainer **/
#body {
    clear: both;
    margin: 0 auto;
    max-width: 534px;
}
html, body {
    background-color:White;
}
hr {
    margin-bottom:40px;
}
Javascript: [ Need jQuery & jQuery UI ]
$(".myButton").click(function () {
    // Set the effect type
    var effect = 'slide';

    // Set the options for the effect type chosen
    var options = { direction: $('.mySelect').val() };

    // Set the duration (default: 400 milliseconds)
    var duration = 500;

    $('#myDiv').toggle(effect, options, duration);
});

HTML:
<div id="body">
    
<h2>Slide toggle from right to left and left to right.</h2>
    <hr/>
    <p>
        <select class="mySelect">
            <option value="right">Right</option>
            <option value="left">Left</option>            
            <option value="up">Up</option>
            <option value="down">Down</option>
        </select>
        <button id="button" class="myButton">Run Effect</button>
    </p>
    <div id="myDiv">
        <p>Test content</p>
    </div>
</div>

About selvam4win

I am Selvam. I am very jolly person and frank one.

Posted on January 3, 2015, in Uncategorized. Bookmark the permalink. Leave a comment.

Comments are closed.

%d bloggers like this: