How To Hide Button If Click on Text or Jquery Toggle
Your can Make Hide/Show System Using JQuery Toggles.When a User Click on "Text" then Button Will appear or Disappear.
Overview: What You will Need:
You will Needs 4 Files:
index.html
style.css
script.js
jquery_latest.js
Note: Put All files In same Folder.
Download jquery_latest.js from http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js
Code For index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | < html > < head > < title >MegaTech24 jQuery is(Hide Show) method tutorial With Source Code</ title > < link rel = "stylesheet" href = "style.css" type = "text/css" /> < script src = "jquery_latest.js" type = "text/javascript" ></ script > < script src = "script.js" type = "text/javascript" ></ script > </ head > < body > < p id = "tutorial" >Click Me to Watch Toggle /Hide Show Effects</ p > < input type = "submit" id = "MegaTech24" value = "Submit" /> </ body > </ html > |
Code For style.css:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | body{ font-family : Verdana ; font-size : 13px ; } #content_pane{ width : 400px ; margin : 0 auto ; overflow : hidden ; border : 1px solid #ccc ; border-radius: 5px ; padding : 10px ; } #content_pane form{ } #content_pane input{ } |
Code For script.js
1 2 3 4 5 6 7 8 9 | $(document).ready( function (){ $( '#tutorial' ).click( function (){ if ($( '#MegaTech24' ).is( ':visible' )){ $( '#MegaTech24' ).hide(); } else { $( '#MegaTech24' ).show(); }; }); }); |
Please Comments If You have any Problems.
If You Like This Article Please Like US on Facebook.
Thank You for reading My Article.
No comments:
Post a Comment
Thank You for Your Comment
Note: Only a member of this blog may post a comment.