jquery animate function -click one div toggle another

Question

Have this jquery function that always gives me the second function every time i click. How can I stop this?

I have a navbar that has 3 links and for every link i have a .contentDiv with different id's. Every time somone clicks on one of those links the toggle function takes place; hiding all .contentDiv expect the one that is linked to that link. and an animation of sliding to the left occurs to that one .contentDiv

HTML:

.navbar
ul
    li
        a.about(href='#') About
            span
            span
    li
        a#portfolio(href='#') HOME
            span
            span
    li
        a(href='#') Contact
            span
            span
.contentDiv#portfolioContent
                    .title About
                    .content
                        .fse
                            p Lorem ipsum dolor sit amet, consectetur adipiscing elit.

CSS:

    .contentDiv {
    transform: skew(45deg);
    width: 100%;
    height: 100%;
    position: relative;
    top: 5%;
    left: 300%;
    overflow: hidden;
}

.title {
    position: absolute;
    top: 30%;
    left: 30%;
    font-size: 500%;
    font-family: Raleway;
    font-weight: 800;
    color: #EAEBED;
}

.content {
    width: 100%;
    height: 50%;
    top: 43%;
    left: 3%;
    font-size: 130%;
    font-family: Raleway;
    color: #EAEBED;
    position: absolute;
    overflow:scroll;
    padding-bottom: 7%;
}

Jquery:

$('.about').click(function () {
    $("#aboutContent").toggle(
        function() {
            $("#aboutContent").animate({left: "115%"}, { //coming out of hiding
                duration: 2000
            });
        }, function() {
            $("#aboutContent").animate({left: "300%"}, { //back into hiding
                duration: 2000
            });
        }
    );
});

Are you saying only the second one is being called, but you actually want both of the handlers to run? — Cody
– Cody, Commented May 14, 2017 at 2:43
yes only the second toggle function is running when click on the ".about" but i want both to run. — Mus3Math
– Mus3Math, Commented May 14, 2017 at 2:50
do you want to call the another function of click or do you want to stop toggle function? — dEL
– dEL, Commented May 14, 2017 at 2:51
i want it to toggle between the functions when clicked on, but its only calling the second function. — Mus3Math
– Mus3Math, Commented May 14, 2017 at 2:54

Community · Accepted Answer · 2017-05-23 11:54:47Z

1

You can create a clickToggle function and use it to toggle between functions on click:

Source: jQuery click / toggle between two functions

(function($) {
    $.fn.clickToggle = function(func1, func2) {
        var funcs = [func1, func2];
        this.data('toggleclicked', 0);
        this.click(function() {
            var data = $(this).data();
            var tc = data.toggleclicked;
            $.proxy(funcs[tc], this)();
            data.toggleclicked = (tc + 1) % 2;
        });
        return this;
    };
}(jQuery));

$('.about').clickToggle(function() {
  alert("First handler for .toggle() called.");
   $("#aboutContent").toggle("Slow");
}, function() {
  alert("Second handler for .toggle() called.");
   $("#aboutContent").toggle("Slow");
});

#aboutContent {
  height: 200px;
  width: 200px;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button class="about">
  CLICK
</button>

<div id="aboutContent">
  123123123
</div>

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered May 14, 2017 at 3:10

Dalin Huang

11.3k5 gold badges35 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mus3Math Over a year ago

i tried this on the .about, which is a link("a" tag), and it would make the .about disappear.

Mus3Math Over a year ago

i will put up all of the HTML, CSS and jquery that i have so that way you can see what is happening.

Dalin Huang Over a year ago

@Mus3Math hm maybe try my updated solution, create a function so you can use anywhere later.

Mus3Math Over a year ago

just upload the rest of the code, so you can take a look at it

Anonymous · Accepted Answer · 2017-05-14 03:02:56Z

1

var c = 1;
$('.about').click(function() {
  $("#aboutContent").toggle(function() {
    c++;
    if (c % 2 == 0) alert("1")
    else alert("2");
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
try this:
<button class="about">
  click
</button>

<div id="aboutContent">
  code..
</div>

answered May 14, 2017 at 3:02

Anonymous

1,9882 gold badges19 silver badges28 bronze badges

1 Comment

Mus3Math Over a year ago

this one works as well, but the other one is one that suits my needs. But thanks anyway.

Community · Accepted Answer · 2017-05-23 11:47:24Z

0

The jQuery toggle() function to toggle between two specified functions is deprecated in v1.8 and removed in 1.9 as mentioned here. toggle() is now used to alternate show() and hide() only.

So you'll have to create a customized toggle plugin as mentioned in the other answer or you may check this stack overflow question and answer.

edited May 23, 2017 at 11:47

CommunityBot

11 silver badge

answered May 14, 2017 at 3:52

Rajalakshmi P

634 bronze badges

Collectives™ on Stack Overflow

jquery animate function -click one div toggle another

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related