Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    jQuery function, request for help

    This is a jQuery question.
    I have been struggling to get the text box to remain hidden until the reveal button is pressed. At the moment it displays the complete text box as soon as you land on the page, and hides the text box when the button is pressed. Is there a function/command that hides the text box until the button is pressed?

    <script type="text/javascript">
    $(document).ready(function(){
    $("#butShowHideSlow").click(function () {

    $("#divShowHideSlow").toggle("slow");
    });
    });
    </script>
    <button id="butShowHideSlow">Show and hide slowly</button>
    <div style="width:300px;height:47px; border: solid 1px black;background-color:LightGrey;text-align:center;" id="divShowHideSlow">This div can be shown or hided slowly</div>

    Thanks for helping a newb

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    6,337
    Thanks
    30
    Thanked 870 Times in 868 Posts
    Please use the [CODE] to show code. And it's a good habit to use CSS for your styles rather than inline.

    I marked the missing rule that will hide your div.

    Code:
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
    <script type="text/javascript">
    $(document).ready(function(){
    	$("#butShowHideSlow").click(function () {
    		$("#divShowHideSlow").toggle("slow");
    	});
    });
    </script>
    <style type="text/css">
    #divShowHideSlow{
    	width:300px;
    	height:47px;
    	border: solid 1px black;
    	background-color:LightGrey;
    	text-align:center;
    	display: none;
    }
    </style>
    </head>
    <body>
    <button id="butShowHideSlow">Show and hide slowly</button>
    <div  id="divShowHideSlow">
    	This div can be shown or hided slowly
    </div>
    </body>
    </html>
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •