Use jQuery's animate function to toggle a different div when clicking on one

Question

Use jQuery's animate function to toggle a different div when clicking on one

Having trouble with a jQuery function that keeps triggering the second function every time I click. How can I fix this issue?

I designed a navbar with 3 links, each linked to a different .contentDiv with unique IDs. Whenever a link is clicked, a toggle function occurs: hiding all other .contentDiv elements except for the one linked to the clicked link, accompanied by a sliding animation to the left.

Sample 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
            });
        }
    );
});

jquery html css

Answer 1

Answer №1

You have the ability to create a custom function named clickToggle that allows you to toggle between different functions when clicked:

For more information, visit: 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>

Answer 2

You have the ability to create a custom function named clickToggle that allows you to toggle between different functions when clicked:

For more information, visit: 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>

Answer 3

Answer №2

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

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

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

Answer 4

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

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

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

Answer 5

Answer №3

In the latest version of jQuery, the toggle() function has been deprecated in v1.8 and completely removed in 1.9. Instead of toggling between two specified functions, it now alternates between show() and hide() only. You can read more about this change here.

If you need to create a custom toggle functionality, you can refer to another answer or visit this Stack Overflow post for alternative solutions.

Answer 6

In the latest version of jQuery, the toggle() function has been deprecated in v1.8 and completely removed in 1.9. Instead of toggling between two specified functions, it now alternates between show() and hide() only. You can read more about this change here.

If you need to create a custom toggle functionality, you can refer to another answer or visit this Stack Overflow post for alternative solutions.

Use jQuery's animate function to toggle a different div when clicking on one

Answer №1

Answer №2

Answer №3

Similar questions

The select2 plugin seems to be having trouble recognizing the Li click functionality

What makes text-decoration a crucial element of the foreground design?

Grammarly is seamlessly inserting padding into my body element

One class seems to be causing issues with hover functionality while the other works perfectly fine

Learn how to send multiple checkbox values using jQuery and AJAX requests

Creating a WordPress Infographic: How to Design a "Wide" Graphic

Enhancing URLs with jQuery/AJAX: A Comprehensive Guide to Adding Parameters

issue concerning slide functionality and ajax integration

Chosen option in jQuery dropdown menu

How can one ensure in Watin that the form is processed by the server before proceeding?

List that dynamically changes in HTML email template

When submitting an Asp net mvc Form, some fields may not be posted as expected

Selenium is unable to locate an element using Jquery

Highlight text when the user is scrolling the page - using JQUERY

Tips on finding a JavaScript file using Google search

Creating an array of form input names using JavaScript within the HTML input tag

Guide on implementing "Displaying 1 of N Records" using the dataTables.js framework

What are the reasons behind professional web designers opting for absolute paths over relative paths (like for CSS, Javascript, images, etc.)?

Icon Searchbar Feature in Ionic 2

A platform for creating ER and flow diagrams specifically tailored for web applications, utilizing open source software