Make appropriate URL fragments appear for tabs when clicked

[jmcmurry]

Tabs can be linked directly by using the # character followed by tab name in lowercase. eg: http://beta.monarchinitiative.org/disease/DOID:14330#variants However, this is not immediately obvious; it would be desirable to make the tab fragment show up in the URL when you click there.

[kshefchek]

The issue is this line: https://github.com/monarch-initiative/monarch-app/blob/2bc4c42/js/tabs.js#L34

event.preventDefault() is used to prevent scrolling of the page upon clicking the tabs, but it also prevents the url from updating. I've played around with different solutions with no luck, @kltm, @DoctorBud, @yuanzhou any suggestions?

[kltm]

How does the AmiGO one grab you? For example: http://amigo.geneontology.org/amigo/term/GO:1990690 No scroll on clicking, but can still bookmark in or raise if the fragment exists. http://amigo.geneontology.org/amigo/term/GO:0044464#display-lineage-tab All POTS and defaults.

[kshefchek]

This looks like the same behavior as the monarch tabs, although you're using bootstrap's data-toggle:tab feature which we should also be using.

The request is that the URL in the browser update as you click the various tabs. If we use bootstrap here we may be able to solve this with something like this: http://stackoverflow.com/questions/12131273/twitter-bootstrap-tabs-url-doesnt-change

[yuanzhou]

@kshefchek Just some rough ideas. Instead of using the <a> tag to wrap up each panel, can you try to just use a <div> with a calss, for example: panel. Then attached the click event to the panel div? This way we don't deal with the scrolling created by using <a>. I tried to use jsfiddle for this example but couldn't save the changes. So I pasted the code here, just a quick example.

var base_url = window.location.href;

$('#categories .panel').click(function (event) {

    var panel_id = '#' + $(this).attr('id');

    $(panel_id).hide();

    window.location.href = base_url + panel_id;
    console.log(window.location.href);
});

<div id="categories">
    <div class="panel" id="overview">
    <p>
        Among going manor who did. Do ye is celebrated it sympathize considered. May ecstatic did surprise elegance the ignorant age. Own her miss cold last. It so numerous if he outlived disposal. How but sons mrs lady when. Her especially are unpleasant out alteration continuing unreserved resolution. Hence hopes noisy may china fully and. Am it regard stairs branch thirty length afford. 
    </p>
    </div>

    <div class="panel" id="phenotypes">
        <p>
            Unpleasant nor diminution excellence apartments imprudence the met new. Draw part them he an to he roof only. Music leave say doors him. Tore bred form if sigh case as do. Staying he no looking if do opinion. Sentiments way understood end partiality and his.
        </p>
    </div>

    <div class="panel" id="genes">
        <p>
            Shot what able cold new the see hold. Friendly as an betrayed formerly he. Morning because as to society behaved moments. Put ladies design mrs sister was. Play on hill felt john no gate. Am passed figure to marked in. Prosperous middletons is ye inhabiting as assistance me especially. For looking two cousins regular amongst. 
        </p>
    </div>

</div>

Then you should be able to append the pabel id to the URL as fragment.