CODEWITHSUNDEEP
javascriptjqueryjquery-animatescrolltoptoggleclass
Vinko
Vinko

Reputation: 181

toggleClass used to execute two different scrollTop methods, not working

So I have the following function running and it works great. The selected div expands with the .slideToggle() function and the page slides down the body with the .animate() and .scrollTop() methods.

$('.pfitem').click(function(){
        $(this).toggleClass('minimized maximized');
        $(this).next().toggleClass('minimized maximized');
        $(this).next().slideToggle(1200);            
        });

$('.pfitem.minimized').click(function(){
        $('html, body').animate({
        scrollTop: $(this).next().offset().top
        }, 1200);            
        });

Now when I try to add this following code which from my understanding should slide the page back up to the div with an id of #portfolio it does nothing even though that now the class of the div that is targeted by the .click() function has been toggled to .pfitem.maximized, so the previous .click() function should not interfere.

$(".pfitem.maximized").click(function() {
        $('html, body').animate({
        scrollTop: $('#portfolio').offset().top
        }, 1200);
});

This is a snippet of my HTML, I have tried to strip it of irrelevant information (I am using bootstrap and have left some bootstrap classes in the code)

<div class="page" id="portfolio">
    <div class="content container">
      
        <ul class="row npr">
            <li class="container col-xs-12 col-sm-4 col-md-3 pfitem businesscards minimized">
                <div class="orangeover">
                    <span>Business Cards</span>
                </div>
            </li>
          
            <div class="container col-xs-12 maximizeitem minimized" id="businesscards">
                <div class="maxicontent col-sm-4">
                    <h4>BUSINESS CARDS</h4>
                        <p>Some text goes here</p>
                        <p>Some text goes here</p>
                </div><!-- maxicontent -->
                <div class="maxiimages col-sm-8">
                    <button class="close"><span class="">X</span></button>
                    <img src="" class="">
                </div><!-- maxiimages -->
            </div><!-- container maximizeitem -->
        </ul>
      
    </div><!-- .content .container -->
</div><!-- #portfolio -->

This is my first post, I hope I have provided sufficient information.

Thanks

Upvotes: 2

Views: 74

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388406

Since you want the selectors to be evaluated dynamically you will have to use event delegation

$(document).on('click', '.pfitem', function () {
    $(this).toggleClass('minimized maximized');
    $(this).next().toggleClass('minimized maximized');
    $(this).next().slideToggle(1200);
});

$(document).on('click', '.pfitem.minimized', function () {
    $('html, body').animate({
        scrollTop: $(this).next().offset().top
    }, 1200);
});

Upvotes: 1

Related Questions