(Javascript) Open a tab, make tab active, scroll to anchor

472
November 21, 2016, at 5:46 PM

[Edit] Unlike some other questions on Stackoverflow, I am not looking just to scroll to an anchor. I need the page to scroll to the tabs, open and make the tab active, and then scroll the rest of the way to the anchor.

I am looking for some help with some code, but it is a bit hard to explain. I am rather new to Javascript and will provide as much detail as I can.

I have some regular tabs, each with some content within them. One of the tabs is a table of product comparisons. Above the tabs on the same page, I have an a href linked to an anchor. What I am trying to achieve is, through Javascript, if a user clicks the external link, it will:

  1. Scroll to the tabs section of the website
  2. Click the "Compare Configurations"tab that has the table (this will have the anchor on it.)
  3. Scroll to the anchor within that tab.

An example of what I am trying to achieve is similar to the GoPro website: EXAMPLE

When you click on the "Compare Editions" (below the PayPal part), it scrolls the page to the correct tab, opens it, and displays the table. That is what I am trying to achieve.

So far, I have the following code for my tabs:

<ul id="tabs">
    <li class="active">FEATURES</li>
    <li>SPECIFICATIONS</li>
   <li>COMPARE CONFIGURATIONS</li>
</ul>
<ul id="tab">
    <li class="active">
        This is the first tab.
    </li>
    <li>
        <br>
        This is the second tab.
    </li>
    <li>
        <br>
        This is the third tab.
    </li>
</ul>

Is there any way to get what I am trying to achieve with Javascript or the like? I am open to any and all suggestions and appreciate any help with this. If you would like to see my page and see how the page is laid out with the tabs, feel free to visit my site.

Answer 1

You can simply toggle the 'active' class using addClass removeClass using jQuery like this:

<ul id="tab">
<li >
    This is the first tab.
</li>
<li class="active">
    <br>
    This is the second tab.
</li>
  <li>
    <br>
     This is the third tab.
</li>

(I think only .active will visible at a time.)

And after that you can scroll to that element:

$('html,body').animate({
    scrollTop: $("#tab").offset().top
  }, 1000)

NOTE: you need Jquery for this.

READ ALSO
Convert a Fetched data in div from excel to a query

Convert a Fetched data in div from excel to a query

The below code fetches data from a csv and presents in to a div as a text but am trying to convert that in to a query on fetch excel import and print then as a query.

307
how to play animation on loading element inner html? [duplicate]

how to play animation on loading element inner html? [duplicate]

This question already has an answer here:.

328
How to close Submenu when clicking on another menu link in twig

How to close Submenu when clicking on another menu link in twig

I have a vertical menu in twig (Symfony2). Some menu links have submenus.

376
Open accordion on load with active class

Open accordion on load with active class

I have an accordion on my website and I would like for the accordion to be open at the right level depending on where the active class is. I have made a JSFiddle.

247