jQuery slideup() slidedown() and slidetoggle() Example
In this tutorial, we are going to see jQuery slideup() slidedown() and slidetoggle() Example. You can use jQuery’s slideUp() and slideDown() methods to hide and display items with a smooth dragging motion using a single line of code.
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>slideup() slidedown() and slidetoggle() Example</title>
<style type="text/css">
.text{
width: 500px;
border: 1px solid black;
margin-top: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".up").click(function(){
$(".text").slideUp();
});
$(".down").click(function(){
$(".text").slideDown();
});
});
</script>
</head>
<body>
<button type="button" class="up">Go Up</button>
<button type="button" class="down">Go Down</button>
<div class="text">
Integer pellentesque arcu at neque egestas gravida. Sed elementum nunc vel pharetra dignissim. Donec ac sem et massa commodo mattis tristique non urna. Integer mauris nunc, vehicula vitae ipsum ultrices, pulvinar dapibus turpis. Phasellus aliquam elementum massa sit amet pretium. Fusce facilisis lacus vitae eros finibus convallis. Vestibulum ac turpis a massa bibendum ullamcorper vitae id ex. Morbi at consequat sem. Sed convallis dictum congue.
</div>
</body>
</html>
| Result |
|---|
|
Integer pellentesque arcu at neque egestas gravida. Sed elementum nunc vel pharetra dignissim. Donec ac sem et massa commodo mattis tristique non urna. Integer mauris nunc, vehicula vitae ipsum ultrices, pulvinar dapibus turpis. Phasellus aliquam elementum massa sit amet pretium. Fusce facilisis lacus vitae eros finibus convallis. Vestibulum ac turpis a massa bibendum ullamcorper vitae id ex. Morbi at consequat sem. Sed convallis dictum congue.
|
You can also use jQuery’s slideToggle() method which runs the animations so that, if the element is initially displayed, it will be hidden. and if it is hidden, it will be displayed. Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>slideup() slidedown() and slidetoggle() Example</title>
<style type="text/css">
.text{
width: 500px;
border: 1px solid black;
margin-top: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".up-down").click(function(){
$(".text").slideToggle();
});
});
</script>
</head>
<body>
<button type="button" class="up-down">UP / Down</button>
<div class="text">
Integer pellentesque arcu at neque egestas gravida. Sed elementum nunc vel pharetra dignissim. Donec ac sem et massa commodo mattis tristique non urna. Integer mauris nunc, vehicula vitae ipsum ultrices, pulvinar dapibus turpis. Phasellus aliquam elementum massa sit amet pretium. Fusce facilisis lacus vitae eros finibus convallis. Vestibulum ac turpis a massa bibendum ullamcorper vitae id ex. Morbi at consequat sem. Sed convallis dictum congue.
</div>
</body>
</html>
| Result |
|---|
|
Integer pellentesque arcu at neque egestas gravida. Sed elementum nunc vel pharetra dignissim. Donec ac sem et massa commodo mattis tristique non urna. Integer mauris nunc, vehicula vitae ipsum ultrices, pulvinar dapibus turpis. Phasellus aliquam elementum massa sit amet pretium. Fusce facilisis lacus vitae eros finibus convallis. Vestibulum ac turpis a massa bibendum ullamcorper vitae id ex. Morbi at consequat sem. Sed convallis dictum congue.
|
- jQuery MCQs – Multiple Choice Questions and Answers – Part 1
- jQuery MCQs – Multiple Choice Questions and Answers – Part 2
- How to detect a click on iframe in JQuery
- How to find sub-string between the two words using jQuery
- How to Get Substring from a String Using jQuery
- How to remove all spaces from a string with jQuery
- How to count number of characters in a string with JQuery
- How to count words using JQuery
- How to loop through array with jQuery.each()?
- How to show/hide DIV based on Radio Button click
- How to show/hide DIV if checkbox selected
- How to show/hide DIV on selection of ANY drop-down value?
- How to define a function in jQuery?
- How to Call a Function After Some Time in jQuery
- How to add CSS properties to an element dynamically with jQuery
- How to add attribute to an HTML element in jQuery
- How to Remove Attributes from HTML Element in jQuery
- How to add DOM element in jQuery
- How to Remove Elements from DOM in jQuery
- How to disable href link in jQuery
- How to check if a checkbox is checked with jQuery
- How to get the value of selected radio button with jQuery
- How to get the value of a CheckBox with jQuery
- How to bind onclick event to dynamically added HTML element with jQuery
- How to get the value of a select with jQuery
- How to get the current URL using Jquery
- How to remove a tag without deleting its content with jQuery
- How to get the text content of an element with jQuery
- How to check if an element is visible with jQuery
- How to find mouse position relative to element with jQuery
- How to find mouse position relative to the document with jQuery
- Show read more link if the text exceeds a certain length with jQuery
- jQuery slideup() slidedown() and slidetoggle() Example
- How to slide toggle a DIV from Left to Right?
- How to disable/enable submit button in jQuery
- How to disable all <input> inside a form with jQuery?
- How to check and uncheck a radio button using jQuery
- How to check and uncheck a checkbox with a button using jQuery
- How to move an element with arrow keys in jQuery
- How to get selected file name from Input Type File using jQuery
- How to check if an element is hidden in jQuery
- How to Redirect to Another Web Page Using jQuery and JavaScript
- How to insert HTML content into an iFrame with jQuery
- Auto-update DIV content while typing in textarea with jQuery
- How to Add or Remove Table Rows Dynamically with jQuery
- How to change the href for a hyperlink with jQuery
- How to refresh a page with jQuery
- How to Get Number of Elements inside a DIV with jQuery
- How to Check If a Value is Numeric or Not in jQuery
- How to detect pressing Enter on keyboard using jQuery
- How to detect the Enter key in a text input field using jQuery
- How to get the value of a textarea in jQuery
- How to reset a form using jQuery
- How to check if the input is empty with jQuery
- How to display the value of the input in DIV in real-time with jQuery
- How to detect a click outside an element with jQuery
- How to Loop Through Elements with the Same Class in jQuery
- How to change the text of a button in jQuery
- How to Change the Value of an Input in jQuery
- How To Change CSS Style With jQuery
- How to Get the Value in an Input Text Box using jQuery
- How to Set CSS background-image Property Using jQuery
- How to Detect a Mobile Device in jQuery
- How to Get the data-id Attribute of an Element In jQuery
- How to Add <li> in an Existing <ul> with jQuery
- Get data from a database without refreshing the browser using Ajax
- Submit Form Without Page Refresh Using Ajax, jQuery, and PHP
- How to show/hide a div with a slide effect in jQuery
- How to get URL parameters using jQuery
- How to get form data with JQuery
- Submit a Form Using Jquery Ajax
- Scroll to the top of the page using jQuery
- Triggering a CSS animation with Jquery
