Question

We use scrollto.

Code:js

$(document).ready(function() {
    $("a.anchorLink").anchorAnimate()
});

jQuery.fn.anchorAnimate = function(settings) {

    settings = jQuery.extend({
        speed : 1100
    }, settings);   

    return this.each(function(){
        var caller = this
        $(caller).click(function (event) {  
            event.preventDefault()
            var locationHref = window.location.href
            var elementClick = $(caller).attr("href")

            var destination = $(elementClick).offset().top;
            $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
                window.location.hash = elementClick
            });
            return false;
        })
    })
}

code:html

<a href="#myAnchor" rel="" id="anchor1" class="anchorLink">Add a Comment</a>

Scroll to destination:

<a name="myAnchor" id="myAnchor">Play Nicely</a>

We also use show/hide onclick:

code:html

<a class="nag-details" href="javascript:;">Conditions Apply* &#x25BC;</a>

destination:html

<div id="closeable-nag" style="display:none">
<p>some stuff here</p>
</div>

code:js

jQuery(".nag-details").click(function() {
    jQuery("#closeable-nag").slideToggle(function() {
        if (jQuery(this).is(":visible")) {
            jQuery(".nag-details").text("Conditions Apply* \u25b2");
        } else {
            jQuery(".nag-details").text("Conditions Apply* \u25bc");
        }
    });
});

Ok so here is my question.

Onclick of myanchor link, i want to scroll to and open closeable-nag ( and show the div containg “some stuff here”

Is this dooable ?

I could possibly set up 2 fiddles if need be.

Essentially, these 2 work independantly. So I can click the anchor, and page scrolls to dest. element.
I can also click dest. element and SHOW on slide the hidden content, and close the content.

What I am essentially, looking to do is combine scroll page and OPEN the hidden element ( ie. show )

Any suggestions Please.

Answer 1

Here you go! :

DEMO FIDDLE

Code:

$(document).ready(function() {

    $("a.anchorLink").anchorAnimate();

 // CRETE A FUNCTION 'cond' like 'condition'   
    function cond(){
        $("#closeable-nag").slideToggle(function() {
            if ($(this).is(":visible") ) {
                $(".nag-details").text("Conditions Apply* \u25b2");
            } else {
                $(".nag-details").text("Conditions Apply* \u25bc");
            }
        });
    }

    $('#anchor1').click(function(){
        cond();   ///////////// run it on anchor click...
    });  

    $(".nag-details").click(function() {
        cond();    //////////// and on him-self!
    });   

});

---

DEMO without the ‘scrollTo’ plugin

// CREATE A FUNCTION 'slide' ...like... SLIDE! .D
function slide(){
    var condPos = $('.nag-details').position().top;    
    $('html, body').animate({ scrollTop: condPos }, 2000);
    return false;
}

// CRETE A FUNCTION 'cond' like 'condition'   
function cond() {
    $("#closeable-nag").slideToggle(function() {
        if ($(this).is(":visible")) {
            $(".nag-details").text("Conditions Apply* \u25b2");
        } else {
            $(".nag-details").text("Conditions Apply* \u25bc");
        }
    });
}

$('#anchor1').click(function() {
    cond();  // Run the condition
    slide(); // and SLIDEEEEE! :)
});
$(".nag-details").click(function() {
    cond(); //// run just the condition!
});

---

And here is a striped code using ternary operators:

shortened DEMO with ternary operators (and without the plugin)

var nag = $(".nag-details"),
    t1 = nag.text("Conditions Apply* \u25b2"),
    t2 = nag.text("Conditions Apply* \u25bc");                  
function s(){
    var cPos = $('.nag-details').position().top;    
    $('html, body').animate({scrollTop:cPos}, 2000);
}
function c() {
    $("#closeable-nag").slideToggle(function() {        
        ( $(this).is(":visible") ) ? (t1) : (t2);
    });
}
$('#anchor1').click(function() {
   c();
   s();
});
$(".nag-details").click(function(){
   c();
});