javascript multiple tabs not working properly

Question

I am developing a WordPress site and wanna do something like this:

I have a fiddle of how it working now: https://jsfiddle.net/Wosley_Alarico/9gcrjntr/

It only works when I click on the links of the first tab.

Is there a better way that you can help me create multiple tabs each with their content using javascript or jquery?

HTML:

<ul class="tab">
  <li><a href="#" class="tablinks" onclick="openCity(event, 'London')">London</a></li>
  <li><a href="#" class="tablinks" onclick="openCity(event, 'Paris')">Paris</a></li>
  <li><a href="#" class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</a></li>
</ul>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>
<ul class="tab">
  <li><a href="#" class="tablinks" onclick="openCity(event, 'London')">London</a></li>
  <li><a href="#" class="tablinks" onclick="openCity(event, 'Paris')">Paris</a></li>
  <li><a href="#" class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</a></li>
</ul>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>

JAVASCRIPT:

function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

CSS:

ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Float the list items side by side */
ul.tab li {float: left;}

/* Style the links inside the list items */
ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.tab li a:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
}

@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

It does work for me... https://jsfiddle.net/9gcrjntr/1/ (changed javascript load type to *"No wrap"*) — Artur Filipiak, Sep 21 '16 at 13:13
@Artur Filipiak. It does because you edit the fiddle by eliminating the second tab. How can you make the second tab work as well? Cause if you check on my fiddle, when I click on any link of the second tab, the content does not appear. https://jsfiddle.net/Wosley_Alarico/9gcrjntr/2/ — Sidney Sousa, Sep 21 '16 at 13:19
No. I haven't removed second tab. All tabs are there. (as stands in your fiddle in the question). Fiddle you posted here in the comment is different. — Artur Filipiak, Sep 21 '16 at 13:21
Please compare how mine is printed and how yours is displayed: https://jsfiddle.net/Wosley_Alarico/9gcrjntr/5/ jsfiddle.net/9gcrjntr/1 — Sidney Sousa, Sep 21 '16 at 13:25
I see... Just the fiddle in your question is not the same. Check yourself, there's **only one** tab section. — Artur Filipiak, Sep 21 '16 at 13:27
@Artur Filipiak. My question clearly states that I need help for multiple tabs and the second fiddle that I sent you on the comment shows two tabs, not one. Can you help to create multiple tabs as the picture shows? — Sidney Sousa, Sep 21 '16 at 13:32
I used javascript but it's not really a requirement. jQuery is more than welcome as I might understand better anyway. — Sidney Sousa, Sep 21 '16 at 13:35

score 1 · Answer 1 · edited May 23 '17 at 10:27

Answering your question: you cannot have multiple elements with the same id attribute. It's an identifier, and as such must be unique in the whole document.

Next thing is that using onClick attribute is a bad practice.
Instead, use data attribute:

<li><a href="#" class="tablinks" data-id="London">London</a></li>
...

then handle click event with jQuery (as you have it in the tags):

$('.tablinks').click(function(){
    // target tab id will be: 
    $('#'+$(this).data('id'))
});

Make sure, that all the elements have unique id attributes.

$('.tablinks').each(function(){
  !$(this).is('.active') || $('#'+$(this).data('id')).show();
}).click(function(){
  $(this).closest('.section').find('.tabcontent').hide()
  .end().find('.tablinks').removeClass("active");
  $('#'+$(this).addClass("active").data('id')).show();
});

ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Float the list items side by side */
ul.tab li {float: left;}

/* Style the links inside the list items */
ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.tab li a:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {
    background-color: #ccc;
}

.section{
  margin-bottom:20px;
}

/* Style the tab content */
.tabcontent {
    border: 1px solid #ccc;
    display: none;
    padding: 6px 12px;
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
}

@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=section>
  <ul class="tab">
    <li><a href="#" class="tablinks active" data-id="London">London</a></li>
    <li><a href="#" class="tablinks" data-id="Paris">Paris</a></li>
    <li><a href="#" class="tablinks" data-id="Tokyo">Tokyo</a></li>
  </ul>

  <div id="London" class="tabcontent">
    <h3>London</h3>
    <p>London is the capital city of England.</p>
  </div>

  <div id="Paris" class="tabcontent">
    <h3>Paris</h3>
    <p>Paris is the capital of France.</p>
  </div>

  <div id="Tokyo" class="tabcontent">
    <h3>Tokyo</h3>
    <p>Tokyo is the capital of Japan.</p>
  </div>
</div>

<div class=section>
  <ul class="tab">
    <li><a href="#" class="tablinks active" data-id="Warsaw">Warsaw</a></li>
    <li><a href="#" class="tablinks" data-id="Copenhagen">Copenhagen</a></li>
    <li><a href="#" class="tablinks" data-id="Moscow">Moscow</a></li>
  </ul>

  <div id="Warsaw" class="tabcontent">
    <h3>Warsaw</h3>
    <p>Warsaw is the capital city of Poland.</p>
  </div>

  <div id="Copenhagen" class="tabcontent">
    <h3>Copenhagen</h3>
    <p>Copenhagen is the capital of Denmark.</p>
  </div>

  <div id="Moscow" class="tabcontent">
    <h3>Moscow</h3>
    <p>Moscow is the capital of Russia.</p>
  </div>
</div>

[enclosed each tabs section in a separate <div class="section">]

.Thanks it helps.Is there a way to keep the tabcontent already opened by default so that whenever I click on link it just displays the content? — Sidney Sousa, Sep 21 '16 at 13:47
Yes, it is. https://jsfiddle.net/9gcrjntr/7/ (add `active` class to the links in your HTML) — Artur Filipiak, Sep 21 '16 at 13:52
@ Artur Filipiak. Apologies I should have mentioned in the previous comment something else: Eg: When I click on a link from a tab, the other tabs content are hidden. What would be the best technique to never close the tabs when when I click in any link? Hope I could explain properly — Sidney Sousa, Sep 21 '16 at 13:55
You can wrap each section in a separate `
` and use code like in this fiddle https://jsfiddle.net/9gcrjntr/9/ — Artur Filipiak, Sep 21 '16 at 13:57
Sorry, there was a bug in last fiddle :-) https://jsfiddle.net/9gcrjntr/10/ — Artur Filipiak, Sep 21 '16 at 14:06

score 0 · Answer 2 · answered Sep 21 '16 at 13:42

0

Try this FIDDLE

var openCity = null;
window.openCity = function(evt, cityName) {......

Here we just need to define function , use fiddle for it

answered Sep 21 '16 at 13:42

Pratik Parekh

447
4
19

As mentioned in the question and showed in the photo, it should be multiple tabs. – Sidney Sousa Sep 21 '16 at 13:51
add another function and change class name – Pratik Parekh Sep 21 '16 at 14:08

Anton Chukanov · Answer 3 · 2016-09-21T14:25:30.290

Also look at library Tabs from jQuery UI. Mb it'll be helpful. All your js code will replaced by code

$('#tabs').tabs();

Content:

<div id='tabs'>
  <ul>
    <li><a href="#London">London</a></li>
    <li><a href="#Paris">Paris</a></li>
    <li><a href="#Tokyo">Tokyo</a></li>
  </ul>

  <div id="London" class="tabcontent">
    <h3>England</h3>
    <p>England is great to live.</p>
  </div>

  <div id="Paris" class="tabcontent">
    <h3>Madrid</h3>
    <p>Madrid is great to party</p>
  </div>

  <div id="Tokyo" class="tabcontent">
    <h3>Japan</h3>
    <p>Japan is awesome in technology.</p>
  </div>
</div>

https://jsfiddle.net/894L3577/1/

You can find more info on official site of jQuery UI https://jqueryui.com/tabs

can you explain more @Anton Chukanov, with an example if you can? — Youcef LAIDANI, Sep 21 '16 at 14:07

Xupitan · Answer 4 · 2016-09-23T10:24:23.223

take your function to head tag

<head>
    function openCity(evt, cityName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active",    "");
        }
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";
    }
</head>

javascript multiple tabs not working properly

4 Answers4