Question

I have made a function to open to 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?

HTML:

<div class="heading">
    <p>
        <a href="#">....</a>
    </p>
</div>
<div class="more">
    <p>...</p>
</div>

etc.

jQuery:

<script type="text/javascript">
    $(function () {
        if($('.heading')[0]) {
            $('.heading').toggle(function () {
                $(this).next('.more').slideDown();
            },

            function () {
                $(this).next('.more').slideUp();
            });
            $("a[href='" + window.location.hash + "']").parent(".heading").click();
        }
    })
</script>

EDIT: I added an id to each hidden div, and with the following function, it worked!

window.onload = function() {
    var hash = window.location.hash;
    if(hash != "") {
        var id = hash.substr(1); 
        document.getElementById(id).style.display = 'block';
    }
};

Answer 1

well you could have the jquery append a Querystring to the URL of the page you link to , which “carries over” the DIV that was opened eg myurl.html?opened=div_3

there might be a way to do that using # also , but both seem a bit clunky and undesirable.

You could do Ajax, and have it stored in a PHP session also.

(I have only seen this done for accordion style menus in navigation before, but then you know your parent anyway frlom the page so you open its LI for example).

EDITING TO ADD: here is a link to a Javascript function you can use to look at the querystring and therefore work out which DIV you need opened:
http://www.svlada.com/blog/2012/06/15/how-to-get-url-parameters-javascript/