Data-Filter Page Load

Question

How would I go about making it so that when the page loads if the url is index.php#section it will load the place .section. I know I can do this with data-filters which is what I'm doing right now, when you click on an element it loads that section. But how do I make it so if they goto index.php#section it would bring them to the same area as if you were to click on an element and load the .section data-filter?

I have tried this many ways like giving the div an id saying section and you can goto #section but it doesn't work as its hidden when you first load the page.

For example goto http://codeeplus.net/index.php#contact

It doesn't work, it just moves your page down like 5px.

Any ideas?

Answer 1

Might not be perfect or the most fantastic approach, but if you want it to show an item after the page loads, try triggering the click of the trigger you have defined based on the location.hash:

$(function() {
    if (location.hash) {  
        var item = location.hash.substr(1);   // remove # sign
        $('.trigger[data-filter=".'+item+'"]').trigger('click');  // trigger click handler
    }
});