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 4 of 4
  1. #1
    New Coder
    Join Date
    May 2014
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    jQuery Show and Hide Content

    I am trying to show and hide content with javascript. Right now the content fades in and then fades right back out when I click on the button. I want it to show and the hide on a second click.

    Here is my .js file:

    Code:
    $(document).ready(function(){
        $('.expand').hide();
    });
    
    $(document).ready(function() {
        $('button').click(function() {
            $('.expand').fadeIn('slow');
        });
    });
    
    $(document).ready(function() {
    	$('button').click(function() {
    		$('.expand').fadeOut('slow');
    	});
    });
    and here is the code for the HTML file:

    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<title>jQuery Testing</title>
    		<script src="http://andrewbleke.atwebpages.com/css/jquery-2.1.1.min.js"></script>
    		<script src="http://andrewbleke.atwebpages.com/css/bootstrap.js" type="text/javascript"></script>
    		<script src="http://andrewbleke.atwebpages.com/css/expand.js" type="text/javascript"></script>
    		<link rel="stylesheet" href="http://andrewbleke.atwebpages.com/css/bootstrap.css" type="text/css">
    	</head>
    	<body>
    		<div>
    		  <button class="btn btn-primary">Expand</button>
    			<div class="jumbotron expand">
    				<p>CONTENT</p>
    				<p>CONTENT</p>
    				<p>CONTENT</p>
    			</div>
    		</div>
    	</body>
    </html>
    Here is the page: jQuery Testing

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Look closely at the Javascript code. What does it tell you?

    - There are three "document ready" event handlers, each of which will be called as soon as the DOM is ready
    - In the first one you hide the div with class "expand"
    - In the second and the third one you define two click handlers for the button, each of which will be called on click of the button

    So if you click on the button, the first event handler will fade the DIV in, the next event handler will immediately fade it out.

    What you want is a toggle
    Code:
    $('button').click(function() {
       $('.expand').toggle('slow');
    });

  • #3
    New Coder
    Join Date
    May 2014
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Toggle with If Statement

    I tried your bit of code there and was not successful. I tried creating a variable and set it to false and have it toggle between true and false with an if statement.

    Here is what I came up with.
    Code:
    $(document).ready(function() {
    	var toggle = false;
    	if (toggle == false){
        $('button').click(function() {
            $('.expand').fadeIn('slow');
        })
        	toggle = true;
        };
        
        
    	if (toggle == true){
        $('button').click(function() {
            $('.expand').fadeOut('slow');
        })
        	toggle = false;
        };
    });
    Here is the page: Site

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    You have to understand that you don't need two event handlers to handle click events ... with every call to .click(function(){...}) you are creating an additional event handler rather than replacing the old one(s).

    With .toggle() the Javascript code can be as simple as
    Code:
    $(document).ready(function() {
        $('.expand').hide();
        $('button').click(function() {
            $('.expand').toggle('slow');
        });
    });
    JSBIN example: JS Bin - Collaborative JavaScript Debugging

  • Users who have thanked devnull69 for this post:

    adbleke (06-05-2014)


  •  

    Posting Permissions

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