• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 246
  • Last Modified:

clck function jquery

Hello, I have a script that I am working with to expand a div container to display content and it is working. you click it, it expands, you hit close and it closes. but you can not click on it again because of the .one . What I would like to be able to do with the code below is, make it to where I can open and close it as many times as I want.

any help would be great,

thanks a bunch
JaxBrian
$(function() {
	$('#container').one("click", function() {
	$(this).animate({
		width: '+=430'
	}, 500, function() {});
	$('#close-container').show();
	}, function () {
		$('#container').animate({
			width: '-=400'
		});

});

		
$('#close-container').click(function () {
		$('#container').animate({
			width: '-=430'
		}, 500, function() {});
		$(this).hide();
		$('#container').hide();
	});	
});

Open in new window

0
jaxbrian
Asked:
jaxbrian
  • 6
  • 4
4 Solutions
 
StingRaYCommented:
Try this:

$(function() {
        $('#container').live("click", function() {
        $(this).animate({
                width: '+=430'
        }, 500, function() {});
        $('#close-container').show();
        }, function () {
                $('#container').animate({
                        width: '-=400'
                });


                
    $('#close-container').live("click", function () {
                $('#container').animate({
                        width: '-=430'
                }, 500, function() {});
                $(this).hide();
                $('#container').hide();
        });     
    });
});

Open in new window

0
 
jaxbrianAuthor Commented:
Sorry, it just kept on moving it over. it also disable the #close part of it.



thanks a bunch for trying to help out i have kinda hit a wall. jquery is not my strong suit
0
 
StingRaYCommented:
Try this:

$(function() {
    $('#container').toggle(function() {
		$(this).stop().animate({
			width: '+=430'
			}, 500, function() {});
		$('#close-container').show();
	}, function() {
		$('#container').stop().animate({
			width: '-=400'
			}, 500, function() {});
		$('#close-container').hide();
    });
	    
    $('#close-container').live("click", function () {
	    $('#container').animate({
		    width: '-=430'
	    }, 500, function() {});
	    $(this).hide();
		$('#container').hide();
    });
});

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
jaxbrianAuthor Commented:
it does toggle back and forth but, if you click on it again after you click the close button it hides completely. also, you can not click any of the links that are in the hidden content.
0
 
StingRaYCommented:
Actually, it depends on your DOM structure. If you provide a place to bring it out, you can re-open it using the following code.

$('#opener').click(function() {
                $('#container').stop().animate({
                        width: '+=430'
                        }, 500, function() {});
                $('#close-container').show();});

Open in new window

0
 
jaxbrianAuthor Commented:
sorry it has taken me so long to respond to you. Do you mean create a new div container around it (#opener)?
0
 
StingRaYCommented:
Can you show me your DOM structure?
0
 
jaxbrianAuthor Commented:
here is a link to the jsfiddle. http://jsfiddle.net/jaxbrian/fY8hp/    for some reason It is closing there when I click on it, when in the site it is functioning correctly. maybe this will give you some insight to it.


thanks for your help
0
 
jaxbrianAuthor Commented:
I was able to solve the problem using an if statement and a counter. I am going to award you points StringRaY for the work that you put in. I really appreciate it a bunch.


JaxBrian
0
 
jaxbrianAuthor Commented:
thank you very much for your help
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now