How to move browser window to the top of an spry accordion tab?

Question

How to move browser window to the top of an spry accordion tab?

359 Views Asked by Aasim Azam At 21 October 2024 at 01:53

I have a spry accordion in my site that has varying heights. Some are larger than the screen - when I click on the next tab the spry content area expands but shows only the content at the very end of the spry content area window.

to explain:

    |[tab 1 ....            ]|<hidden area
    | content 1              |<hidden area
    | content 1              |<hidden area
     ------------------------
    | content 1              |<visible area 
    | content 1              |<visible area
    | content 1              |<visible area 
    | content 1              |<visible area
    | content 1              |<visible area 
    | content 1              |<visible area 
    |[tab 2 ....            ]|<visible area
     ------------------------
    | content 2              |<hidden area
    | content 2              |<hidden area

when I click tab 2 this happens

    |[tab 2 ....            ]|<hidden area
    | content 2              |<hidden area
    | content 2              |<hidden area
     ------------------------
    | content 2              |<visible area 
    | content 2              |<visible area
    | content 2              |<visible area 
    | content 2              |<visible area
    | content 2              |<visible area 
    | content 2              |<visible area 
    |[tab 3 ....            ]|<visible area
     ------------------------
    | content 3              |<hidden area
    | content 3              |<hidden area

when this is what I want to happen when I click on any tab

     ------------------------
    |[tab 2 ....            ]|<visible area
    | content 2              |<visible area
    | content 2              |<visible area
    | content 2              |<visible area 
    | content 2              |<visible area
    | content 2              |<visible area 
    | content 2              |<visible area
     ------------------------
    | content 2              |<hidden area 
    | content 2              |<hidden area 
    |[tab 3 ....            ]|<hidden area
    | content 3              |<hidden area
    | content 3              |<hidden area

When I click any tab I want the page to reposition it self so that the tab heading goes to the most top part of the browser, how can I do this?

I hope this question makes sense as I thought real hard about it don't want to lose any rep!

Original Q&A

There are 1 best solutions below

**Circle B** · Answer 1

This goes in the <head>:

<script type="text/javascript">
function goToAnchor(anchor) {
  location.href = "#"+anchor;
}

function spryTabAnchor(anchor)
{
  setTimeout("goToAnchor('"+anchor+"')", 500); //The 500 milliseconds is a delay so you still have the animation.
}
</script>

This is the anchor:

<div class="AccordionPanelTab" onclick="spryTabAnchor('pan2')"<a id="pan2"></a>Tab</div>

How to move browser window to the top of an spry accordion tab?

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in ACCORDION

Related Questions in SPRY

Trending Questions

Popular # Hahtags

Popular Questions