Fire 2 actions with ONE click on a button

Question

I'm trying to assign two actions to a button in jQuery. The button is supposed to:

1. open a hidden div, and...
2. scroll down to get said div into view.

While both actions are working on the button, they currently require 2 clicks. On the first click the div appears, but to scroll it into view I need to click the button a second time.

Any suggestions how I am going wrong?

jQuery

$(document).ready(function () {
"use strict";
$('.footer a').click(function (event) {
    event.preventDefault();
    $('.impr-text').hide(); // hide previous popup div
    var id = $(this).data("id"); // get the div id which to show
    $('#' + id).fadeIn(function () {  // show cuurent click link's popup
        $(this).css({
            'display': 'block'
        });
    });
    $.scrollTo( '#impressum-footer', 800, {easing:'elasout'} );
});
});

HTML

<div id="impressum-footer">

        <div class="footer">
            <div class="inner-wrap-imp">
                <ul class="impressum-links">
                    <li><a href="#impressum-footer" class="impr-link" data-id="impr-text">Impressum</a></li>
                    <li>|</li>
                    <li><a href="#impressum-footer" class="impr-link" data-id="impr-text">Datenschutz</a></li>
                    <li class="impressum-button" ><a href="#impressum-footer" class="impr-link" data-id="impr-text"></a></li>
                </ul>
            </div>  
        </div>

        <div id="impr-text" class="impr-text">
            <div class="inner-wrap"> ...

Answer 1

if you want to assign 2 different actions on one button, set it 2 different classes (or IDs), lets say

<div class="action1 action2">

After, in jQuery you will be able to do:

$('.action1').on('click', function (e) { console.log('#1'); ... });
$('.action2').on('click', function (e) { console.log('#2'); ... });

JsFiddle: http://jsfiddle.net/g2wdd2cb/

Answer 2

I have now managed to get it going. The approach as explained by @euvl was the one...

I changed my code (the scrolling part) after I realized it wasn't working. The final (working) code now looks like this:

jQuery:

    $(document).ready(function () {
    "use strict";
    $('.footer-action-1 a').click(function (event) {
        event.preventDefault();
        $('.impr-text').hide(); // hide previous popup div
        var id = $(this).data("id"); // get the div id which to show
        $('#' + id).fadeIn(function () {  // show cuurent click link's popup
            $(this).css({
                'display': 'block'
            });
        });
    });
});
$(document).on('click','.footer-action-2 a', function(event) {
        event.preventDefault();
        var target = "#" + this.getAttribute('data-target');
        $('html, body').animate({
            scrollTop: $(target).offset().top
            }, 2000);
});

HTML:

<div id="impressum-footer">

        <div class="footer footer-action-1 footer-action-2">
            <div class="inner-wrap-imp">
                <ul class="impressum-links">
                    <li><a href="#" class="impr-link" data-id="impr-text" data-target="impressum-footer">Impressum</a></li>
                    <li>|</li>
                    <li><a href="#" class="impr-link" data-id="impr-text" data-target="impressum-footer">Datenschutz</a></li>
                    <li class="impressum-button" ><a href="#" class="impr-link" data-id="impr-text" data-target="impressum-footer"></a></li>
                </ul>
            </div>  
        </div>

        <div id="impr-text" class="impr-text">
            <div class="inner-wrap">

The only problem now is that it scrolls a little too far. The moment I add an offset it stops working.

Answer 3

You need to put the scrollTo in the fadeIn completion callback handler. That way callTo is performed on completion of the fadeIn rather than, essentially, at the same time. Currently you seem to also be placing a callback function where another parameter is to go (either duration or options object depending on which method signature you are using). Not sure why you have the css change there at all.

Try something like this:

$(document).ready(function () {
    "use strict";
    $('.footer a').click(function (event) {
        event.preventDefault();
        $('.impr-text').hide(); // hide previous popup div
        var id = $(this).data("id"); // get the div id which to show
        $('#' + id).fadeIn({
            duration: 100, // or whatever duration you want to use
            complete: function() {
                $.scrollTo( '#impressum-footer', 800, {easing:'elasout'} );
            }
        });
    });
});