CODEWITHSUNDEEP
javascripthtml
Martin
Martin

Reputation: 31

Toggle DIV when arriving from a anchor link

I have made a function to open and show a div when clicking on a certain element. I have several of these on one page. How can I link to that page with only a certain div opened? I want to be able to link like this: "http://domain.com/#cat1"..

Super grateful for answers!

HTML:

<a href="#cat1" id="cat1" class="h3 toggle">Lorem ipsum</a>
                        <div class="list-container">
                            <ul class="list">
                                <li class="faq">
                                    <p>Lorem ipsum</p>
                                </li><ul>

JavaScript:

hShow : function(event) {
            var el = $(this),
                arrow = $('span.arrow', this),
                container = el.next('div.list-container'),
                faqList = $('.faq-list:nth(0)', container),
                hList;

            event.stopPropagation();
            event.preventDefault();

            if (container.height() > 0) {
                // collapse
                el.removeClass('expanded');
                container.css({'padding-bottom': '0px'}).animate({'height': '0px'}, 250);
            } else {
                // expand
                hList = faqList.height();
                el.addClass('expanded');
                container.animate({'height': hList +'px'}, 250, function() {
                        $(this).css({
                            'padding-bottom': '10px',
                            'height': 'auto'
                        });
                    });
            }

Upvotes: 2

Views: 4154

Answers (3)

Milimetric
Milimetric

Reputation: 13549

Just handle your link clicks and page loading event with the same logic. Find an anchor above the div and show the corresponding div:

function openDivUnderAnchor(name){
    name = name.replace('#','');
    $('div.collapsible').hide();
    $('a[name='+name+']').next('div').show();
}

$(document).ready(function(){
    // opens the correct div if its link is clicked
    $(document).on('click', 'a.open', function(){
        openDivUnderAnchor($(this).attr('href'));
    });
    // opens the correct div if its anchor is specified in the URL
    openDivUnderAnchor(location.hash);
});​

<ul>
    <li><a class="open" href="#one">first</a></li>
    <li><a class="open" href="#two">second</a></li>
    <li><a class="open" href="#three">third</a></li>
    <li><a class="open" href="#four">fourth</a></li>
</ul>

<a name="one"></a>
<div class="collapsible">first div</div>

<a name="two"></a>
<div class="collapsible">second div</div>

<a name="three"></a>
<div class="collapsible">third div</div>

<a name="four"></a>
<div class="collapsible">fourth div</div>​

Working fiddle: http://jsfiddle.net/q2v2S/2/

Upvotes: 2

Cyrille Ka
Cyrille Ka

Reputation: 15533

You can use the "local part" of the URL, that is in a url like http://www.example.com/#cat1 the part "cat1" after the #. Put in this part for example the id of the div you want to display or in your case the id of the button link.

At first you display the page without any div open, and then with Javascript you use document.location.hash to get the local part, that is your button id. Then you simply show the div corresponding to that id or simulate a click on the button.

A good round up of hash techniques: http://blog.mgm-tp.com/2011/10/must-know-url-hashtechniques-for-ajax-applications/ (described for Ajax, but good for anything dynamic)

Upvotes: 1

Eli Gassert
Eli Gassert

Reputation: 9763

The way I've done this in the past is to look at the URL hash and then "fake" the click.

For example:

$(function()
{
if(!location.hash) return; // don't do anything if no hash set

$('a.toggle[href="' + location.hash + '"]').click();
});

So, on load ($(function() { ... });) If a hash is set (if(!location.hash)...) find the anchor tag with class toggle that has an href set to the current location.hash and fake a click event on it. This should then trigger its expansion, just as if the user actually clicked it.

Upvotes: 0

Related Questions