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
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,199
    Thanks
    23
    Thanked 605 Times in 604 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.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    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
    •