Upon first opening the website, content of all tabs is visible

user_13505109 0
Viewed 51

I implemented some tabs in my websites, However when I first reload the website, the content of all the tabs is visible, it gets fixed when i select any one tab.

Screenshots: Error I'm having

Here's my code:

HTML

<div class="tab">
                <div class="tablinks" onclick="openCity(event, 'PaisleyWilkes')">
                    <img src="image 1.png" alt="" class="avatar">
                    <div class="details">
                        <span class="name">Paisley Wilkes</span><br>
                        <span class="designation">UI/UX</span>
                    </div>
                </div>
                <div class="tablinks" onclick="openCity(event, 'JohnSmith')">
                    <img src="image 1.png" alt="" class="avatar">
                    <div class="details">
                        <span class="name">John Smith</span><br>
                        <span class="designation">UI/UX</span>
                    </div>
                </div>
                <div class="tablinks" onclick="openCity(event, 'JaneSmith')">
                    <img src="image 1.png" alt="" class="avatar">
                    <div class="details">
                        <span class="name">Jane Smith</span><br>
                        <span class="designation">UI/UX</span>
                    </div>
                </div>
            </div>

            <div class="testimonials-content">
                <div id="PaisleyWilkes" class="tabcontent">
                    <h3>Paisley Wilkes says</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus amet consequuntur libero hic quod, omnis natus totam vero repellendus aperiam eveniet. Adipisci voluptatibus a recusandae suscipit commodi minus sunt esse!</p>
                </div>
                <div id="JohnSmith" class="tabcontent">
                    <h3>John Smith says</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus amet consequuntur libero hic quod, omnis natus totam vero repellendus aperiam eveniet. Adipisci voluptatibus a recusandae suscipit commodi minus sunt esse!</p>
                </div>
                <div id="JaneSmith" class="tabcontent">
                    <h3>Jane Smith says</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus amet consequuntur libero hic quod, omnis natus totam vero repellendus aperiam eveniet. Adipisci voluptatibus a recusandae suscipit commodi minus sunt esse!</p>
                </div>

JS

function openCity(evt, cityName) {


 // Declare all variables
  var i, tabcontent, tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  // Show the current tab, and add an "active" class to the link that opened the tab
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

I would like the first tab to be preselected when the page first loads, how would I go about doing that?

tabs html javascript
2 Answers

There are some ways you can use to achieve it

  1. You can add the css class display: none in the elements that you do not want to show and remove the active class at init
  2. Set it once at launch by
$(document).on('pageinit',function(){
    ...
});
user_125695960

Try to set display: none; to your css. When the page loaded it won't show it. Your js function are very good but you missed to make them all unvisible(display: none;) at first. This fix your problem. If this was not the answer you are waiting for, please tell me so we can talk and fix it

user_107650010
Related