javascript - Unhide and hide contents within the div using jquery -
hello after searching of answers on stackoverflow hiding , unhiding stuffs within div don't proper answer because of them depends on form.my scenario have textarea want tapped , person start typing div expands , show buttons post or cancel button, example google+ "share what's new" home screen.
<head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $('textarea').click(function(){ $('button').show().removeattr('disabled'); $('.second').show(); }); }); </script> </head> <body> <form> <div> <textarea></textarea> <br> <div class="second" style="display: none" disabled> <label>where:</label><button>place1</button> or <button>place2</button><br> <label>tags:</label><button>good service</button> <button>minor</button> <button>major</button> </div> <button id="cancel" style="display: none" disabled>cancel</button> <button id="cancel" style="display: none" disabled>post</button> </div> </form>
are looking this?
all have is, handle keypress events , check length of values in textbox show or hide controls.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $('textarea').on('keypress keydown keyup', function(){ if ($(this).val().length >0) { $('button').show().removeattr('disabled'); $('.second').show(); } else { $('button').hide().prop('disabled', true); $('.second').hide(); } }); $('#cancel').on('click', function(){ $('textarea').val('').trigger('keypress'); }); }); </script> </head> <body> <form> <div> <textarea></textarea> <br> <div class="second" style="display: none" disabled> <label>where:</label><button>place1</button> or <button>place2</button><br> <label>tags:</label><button>good service</button> <button>minor</button> <button>major</button> </div> <button id="cancel" style="display: none" disabled>cancel</button> <button id="post" style="display: none" disabled>post</button> </div> </form>