Linking to a specific tab on the same page

Question

On my product pages, I want to have aa link that will take the user to a specific tab below.

The three tabs on each product page are: Description, Reviews, Order Form .

I've created the link which is basic and appears as:

<a href="#tab-name">ORDER</a>.

The tab below is set up as follows:

<div id="tab-name">tab info</div>

A simple link like the one above doesn't work.

When someone opens a product page, the Description tab is the default open tab, which is fine.

How can I create a simple link that when clicked will take the user to the Order Form tab?

I've searched in so many places and most explanations show solutions when you link to a specific tab on one page from another page.

I'm using WordPress as my CMS.

Does something like this need Javascript to make it work? If so, what (simple) code could accomplish this? (I'm not a developer.)

Thank you.

Answer 1

What i understood is you have three div one after other in page and all are visible at same time. Note: if at a time only one div is visible and other is hidden and on click of anchor you need to show it and than scroll to that position in that case you will need javascript

I hope this is not your case in your case all the div are visible and on click of anchor you need to scroll to that particular div, in that case you don't need any javascript and your code should work.

Here is working demo i have made in jsfiddle

http://jsfiddle.net/vickykumarui/n2wzksdg/

sample HTML code is

<a href = "#div1">Go to div 1</a>
<a href = "#div-2">Go to div 2</a>
<a href = "#div3">Go to div 3</a>
<a href = "#div4">Go to div 4</a>


<div id="div1">
<h4>  somed ummy content div1</h4>
<p> somed ummy content</p>
<p>   somed ummy content</p>
    <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
</div>
<div id="div-2">
<h4>  somed ummy content div-2</h4>
<p> somed ummy content</p>
<p>   somed ummy content</p>
    <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
</div>
<div id="div3">

<h4>  somed ummy content div3</h4>
<p> somed ummy content</p>
<p>   somed ummy content</p>
    <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
</div>


<div id="div4">

<h4>  somed ummy content div4</h4>
<p> somed ummy content</p>
<p>   somed ummy content</p>
    <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
</div>

Now when you run the above code in jsfiddle you will observe that on click of anchor page is scrolling to respective div but on click of fourth anchor page is not scrolling to div4 that is because div4 is at bottom of page and it does not have space to scroll below. Hope it helps

Updated above fiddle which initially hides div2, div3,div4 and on click of anchor tag it will show respective div and scroll to that position. Now changed code is

HTML CODE : Changes from previous code is 1. initially each function will have class display noe which is responsible for hidding div and added onclick function like this Go to div 2 this function in js is responsible for showing div onclick of respective html

<a href = "#div1">Go to div 1</a>
<a onclick = "showDiv('div-2')"
href = "#div-2">Go to div 2</a>
<a onclick = "showDiv('div3')" href = "#div3">Go to div 3</a>
<a onclick = "showDiv('div4')" href = "#div4">Go to div 4</a>


<div id="div1">
<h4>  somed ummy content div1</h4>
<p> somed ummy content</p>
<p>   somed ummy content</p>
    <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
</div>
<div id="div-2" class = "displayNone">
<h4>  somed ummy content div-2</h4>
<p> somed ummy content</p>
<p>   somed ummy content</p>
    <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
</div>
<div id="div3" class = "displayNone">

<h4>  somed ummy content div3</h4>
<p> somed ummy content</p>
<p>   somed ummy content</p>
    <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
</div>


<div id="div4" class = "displayNone">

<h4>  somed ummy content div4</h4>
<p> somed ummy content</p>
<p>   somed ummy content</p>
    <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
</div>

CSS CODE

.displayNone{
  display:none
}

JS CODE

var showDiv = function(id){
var element = document.getElementById(id);
element.classList.remove('displayNone')
}