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, May 14 '17 at 02:43
yes only the second toggle function is running when click on the ".about" but i want both to run. — Mus3Math, May 14 '17 at 02:50
do you want to call the another function of click or do you want to stop toggle function? — dEL, May 14 '17 at 02:51
i want it to toggle between the functions when clicked on, but its only calling the second function. — Mus3Math, May 14 '17 at 02:54
Hmm... you're using it the same way they reference in in the api https://api.jquery.com/toggle-event/ not sure why it isn't working — Michael Coker, May 14 '17 at 02:58

score 1 · Answer 1 · answered May 14 '17 at 03:02

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 '17 at 03:02

Hemant

1,961
2
17
27

this one works as well, but the other one is one that suits my needs. But thanks anyway. – Mus3Math May 14 '17 at 03:57

score 1 · Accepted Answer · edited May 23 '17 at 11:54

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 '17 at 11:54

Community

1
1

answered May 14 '17 at 03:10

Dalin Huang

11,212
5
32
49

i tried this on the .about, which is a link("a" tag), and it would make the .about disappear. – Mus3Math May 14 '17 at 03:17
i will put up all of the HTML, CSS and jquery that i have so that way you can see what is happening. – Mus3Math May 14 '17 at 03:28
@Mus3Math hm maybe try my updated solution, create a function so you can use anywhere later. – Dalin Huang May 14 '17 at 03:46
just upload the rest of the code, so you can take a look at it – Mus3Math May 14 '17 at 03:48

score 0 · Answer 3 · edited May 23 '17 at 11:47

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 '17 at 11:47

Community

1
1

answered May 14 '17 at 03:52

Rajalakshmi P

63
4

jquery animate function -click one div toggle another

3 Answers3