0

I am working on a long one-pager. Yes, I know, we hate one-pagers. At least I promise not to implement any parallax-effect, I promise :)

I have multiple sections I can open/close. This part works fine.

The problem: those sections get pretty long, and when they are being closed/collapsed, the user find himself somewhere in the middle of the one-pager.

So, when collapsing a section, I want it to collapse AND to smooth scroll back to the top/the start of the collapsed section.

Here my script:

// Section-Collapse
    //---------------------------------------------------------
    $("section a.read-more").click(function() {
        if($(this).parents("section").hasClass("expanded")) {

            var scrollAnchor = $(this).attr("data-scroll"),
            scrollPoint = $(".anchor[data-anchor='" + scrollAnchor + "']").offset().top - 0;

            $("body,html").animate({
                scrollTop: scrollPoint
            }, 1500, function() {

                // close/collapse section
                $(this).parents("section").addClass("close");
                $("section.expanded.close div.expandable-content").slideUp();
                $(this).parents("section").removeClass("expanded").removeClass("close");
                alert("this test-message is being displayed");

            });


        } else {

            // open section
                $(this).parents("section").addClass("expanded");
                $("section.expanded div.expandable-content").slideDown();


        }
    });

The problem: this part is not being executed EXCEPT the alert message, that one works. Although it is trying to open the dialog window multiple times and Firefox offers me to block this behavior.

// einklappen
                    $(this).parents("section").addClass("close");
                    $("section.expanded.close div.expandable-content").slideUp();
                    $(this).parents("section").removeClass("expanded").removeClass("close");
                    alert("this test-message is being displayed");

It scrolls back to top, to the anchor, but the section will not collapse...

Any ideas why it won't collapse?

Regards, Milan

---------------------------UPDATE

So, it was a problem with the scope of variable "this".

This code here seems to work fine:

// Section-Collapse
    //---------------------------------------------------------
    $("section a.read-more").click(function() {
        if($(this).parents("section").hasClass("expanded")) {

            var scrollAnchor = $(this).attr("data-scroll"),
            scrollPoint = $(".anchor[data-anchor='" + scrollAnchor + "']").offset().top - 0;

            var global_this = $(this);

            $("body,html").animate({
                scrollTop: scrollPoint
            }, 1500, function() {

                // einklappen
                global_this.parents("section").addClass("close");
                $("section.expanded.close div.expandable-content").slideUp();
                global_this.parents("section").removeClass("expanded").removeClass("close");
                alert("this test-message is being displayed");
            });

            // return false;

        } else {

            // ausklappen
                $(this).parents("section").addClass("expanded");
                $("section.expanded div.expandable-content").slideDown();


        }
    });

What is bothering me: why this script tries to open multiple alert dialogs?

user838531
  • 478
  • 5
  • 14
  • Could you have misspelled classes? Why you remove every class at th is point? $(this).parents("section").removeClass("expanded").removeClass("close"); – Sam Mar 09 '18 at 18:04
  • this part works fine on its own, I tested it, but it doesn't work when I put it into the callback function... Those classes are there for selecting the right content to be closed/collapsed, otherwise all sections would be closed and you want to close only the one you selected. – user838531 Mar 09 '18 at 18:07
  • 1
    Ah, it could be because you reference to 'this' inside the callback function. Check this post. https://stackoverflow.com/a/38931751/7733724 – Sam Mar 09 '18 at 18:14
  • 1
    OK, I changed the code to this, now it works: – user838531 Mar 09 '18 at 18:44
  • oh sorry, can't post the code here... – user838531 Mar 09 '18 at 18:45
  • Sam, you were right, thank you. How can I assign you this question so you get the credits for answering it? – user838531 Mar 09 '18 at 18:47
  • Dont worry about that. You can give a plus to my comment in left side of the.comment to other users can see that something useful is commented. – Sam Mar 09 '18 at 18:52

0 Answers0