-
-
Save craic/fa1782bd47872f4c98d6 to your computer and use it in GitHub Desktop.
Simple Example of Show/Hide Text with JQuery
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<style type="text/css"> | |
.comment {border: 1px solid red} | |
</style> | |
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>"></script> | |
<script type="text/javascript"> | |
jQuery(document).ready(function() { | |
// Setup the action when 'hide comments' is clicked | |
jQuery('#hide-comments').click( | |
function() { | |
jQuery('.comment, #hide-comments').hide(); | |
jQuery('#show-comments').show(); | |
} | |
); | |
// Setup the action when 'show comments' is clicked | |
jQuery('#show-comments').click( | |
function() { | |
jQuery('.comment, #hide-comments').show(); | |
jQuery('#show-comments').hide(); | |
} | |
); | |
// Hide 'show comments' when the page is loaded | |
jQuery('#show-comments').hide(); | |
}); | |
</script> | |
</head> | |
<body> | |
<div> | |
<a href='#' id='show-comments' >Show Comments</a> | |
<a href='#' id='hide-comments' >Hide Comments</a> | |
</div> | |
<p>Lorem ipsum dolor sit amet</p> | |
<p class='comment'>First Comment</p> | |
<p>consectetur adipisicing elit</p> | |
<p class='comment'>Second Comment</p> | |
<p>sed do eiusmod tempor incididunt</p> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment