I want to pass a value to a function parameter every time a div is clicked, and toggle a jQuery animation in this function. I tried the code below but it didn't work:

<div onclick="aboutMe(about1)"></div>

function aboutMe(x) {
    $(x).toggle(function() {
        $(x).animate({
            width: '600px'
        }, "slow");
    }, function() {
        $(x).animate({
            width: '40px'
        }, "slow");
    });​
};

What should I do?

I want to pass a value to a function parameter every time a div is clicked, and toggle a jQuery animation in this function. I tried the code below but it didn't work:

<div onclick="aboutMe(about1)"></div>

function aboutMe(x) {
    $(x).toggle(function() {
        $(x).animate({
            width: '600px'
        }, "slow");
    }, function() {
        $(x).animate({
            width: '40px'
        }, "slow");
    });​
};

What should I do?

• javascript
• jquery
• animation
• toggle

4 Answers 4

Why not toggle it via Class ? This is not the best answer, but you might consider this one.

 var aboutMe = function(x) {
   $(x).toggleClass('short')
 };

 $(function() {
   $('#clicker').click(function() {
     aboutMe('#div1');
   });
 });

#div1 {
  height: 100px;
  width: 600px;
  background: #eee;
  text-align: center;
  transition : width 1s linear;
}

#div1.short{

   width : 40px;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">Hey</div>
<button id="clicker">Toggle</button>

The toggle function signature you're attempting to use has been removed from the source. To achieve what you require you would need to check the current width and set the new width accordingly. Try this:

$(x).click(function() {
    $(this).animate({ width: $(this).width() == 40 ? '600px' : '40px' });
});​

Also note that the event handler will be attached each time you click the div and fire the aboutMe() function. If this is not the intended behaviour you should change your code so that you attach the events using JS, something like this:

<a href="#about1">About Me</a>

$('a').click(function() {
    $($(this).attr('href')).animate({ width: $(this).width() == 40 ? '600px' : '40px' });
});​

How do you click on a div? It doesn't work as far as I know on div elements...

<label onclick="aboutMe(about1)">About Me</label>

https://jsfiddle/4ntzpw8z/1/

Here is a fiddle for you. You just have to use a different element. And your function works fine.

Also toggle hasn't been removed according to the docs:

http://api.jquery./toggle/

Saw it on different topic : stackoverflow

$(document).ready( function(){
$('#toggle-button').click( function() {
    var toggleWidth = $("#toggle").width() == 300 ? "200px" : "300px";
    $('#toggle').animate({ width: toggleWidth });
});

});

test fiddle