CODEWITHSUNDEEP
javascriptjqueryurlanchoraccordion
weezle
weezle

Reputation: 81

open jQuery accordion tab through url

I'm using simple jQuery accordion and I would like to open tab when I click on URL with anchor leading to ID of the tab HMTL element.

Real world scenario: I have a navigation link with URL www.domain.com/index.php&something#sometabid. If I click on that link, I'm redirected to the page with that URL, page scrolls to the accordion tab with CSS id sometabid. In that point I would like to have this accordion tab opened, default state is closed.

CODE:

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        padding: 20px
    }    
        h4.open-close {
        background: #f5f5f5;
        border: 1px solid #DDD;
        border-radius: 5px;
        box-shadow: 0 1px 0 white inset;
        margin-bottom: 10px;
        padding: 7px;
    }
    .desc {
        overflow: hidden;
        padding-bottom: 10px;
        padding-top: 0;
    }
</style>

<script type="text/javascript">
    $('.desc').hide();
        $('h4.open-close').click(function (evt) {
            evt.preventDefault();
            if ($(this).is('.current')) {
                $(this).removeClass('current');
                $(this).next('.desc').slideUp(400);
            } else {
                $('.desc').slideUp(400);
                $('h4.open-close').removeClass('current');
                $(this).addClass('current');
                $(this).next('.desc').slideDown(400);
            }
        });​
</script>
</head>
<body>
    <h4 id="sometabid1" class="open-close">
        <a href="#">Urniki</a>
    </h4>
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a luctus mi. Sed non libero turpis. Donec mauris lorem, sollicitudin non facilisis in, fermentum vel tortor.</div>

    <h4 id="sometabid2" class="open-close">
        <a href="#">Dejavnosti</a>
    </h4>
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a luctus mi. Sed non libero turpis. Donec mauris lorem, sollicitudin non facilisis in, fermentum vel tortor.</div>
</body>
</html>

jsfiddle link

I know there is a solution if you are using jQuery UI accordion, but I don't want to use jQuery UI as I prefer lightweight solutions and this additional functionality wasn't planned in the first place.

Thanks in advance for your help.

Upvotes: 0

Views: 4667

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

First get the hash link:

function getAnchor(url)
{
    var index = url.lastIndexOf('#');
    if (index != -1)
        return url.substring(index);
}

And using this, process your document.

currentAnchor = getAnchor(location.href);
$("#" + currentAnchor).show();

Or something similar.

Explanation:

Consider you are in the URL:

http://example.com/index.html#slide2

Now when you use the function:

currentAnchor = getAnchor(location.href);

The currentAnchor will have slide2 as value. Say you have the accordion this way:

<ul>
    <li class="slide" id="slide1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li class="slide" id="slide2">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li class="slide" id="slide3">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li class="slide" id="slide4">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li class="slide" id="slide5">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ul>

And now you can go to the right accordion this way:

$(currentAnchor).show();

In your case, it would be:

    $('.desc').slideUp(400);
    $('h4.open-close').removeClass('current');
    $(currentAnchor).addClass('current');
    $(currentAnchor).next('.desc').slideDown(400);

Upvotes: 3

Related Questions