1
2$("#hide").click(function(){
3 $("p").hide();
4});
5
6$("#show").click(function(){
7 $("p").show();
8});
1
2 $(document).ready(function() {
3 $("#btnshow").click(function() {
4 $("#imgshow").slideToggle();
5 });
6 })
7
1<div id="main">
2 <p> Hide/show this div </p>
3</div>
4
5('#main').hide(); //to hide
6
7// 2nd way, by injecting css using jquery
8$("#main").css("display", "none");
1$("#demo").hide(); // sets to display: none
2$("#demo").show(200); // shows hidden elemnt with animation (speed)
3$("#demo").toggle(); // toggle between show and hide
4
5$( "#element" ).hide( "slow", function() { // hide with callback function
6console.log( "Animation complete." );
7});
8
1jQuery(document).ready(function() {
2 // Hide the extra content initially, using JS so that if JS is disabled
3 jQuery('.rmContent').addClass('rmHide');
4
5 // Set up the toggle.
6 jQuery(".rmToggle").on("click", function() {
7 jQuery(this).nextAll(".rmContent").toggleClass("rmHide");
8 });
9
10 jQuery("#showAbout").text("Show More").click(function(e) {
11 e.preventDefault();
12 jQuery(this).text(jQuery(this).text() == " Show Less ↑" ? " Show More ↓" : " Show Less ↑");
13 });
14
15});