Tabs HTML code are not working

7 Commentaires

  • Ifra Saqlain
    Actions pour les commentaires Permalien

    Hey,

    Which template you are using for this code? Exactly what do you want to do?

    Thank You

    0
  • Pulkit Pandey
    Actions pour les commentaires Permalien

    Hi Jean Lazaro

    Please give it a try the below code and let me know if you have any issue

    <div class="tab">
    <button class="tablinks" onclick="openCity(event, 'London')">London</button>
    <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
    <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
    </div>

    <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>

    2. Add The following CSS at the end of your style.css file

    /* Style the tab */
    .tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    }

    /* Style the buttons inside the tab */
    .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
    }

    /* Change background color of buttons on hover */
    .tab button:hover {
    background-color: #ddd;
    }

    /* Create an active/current tablink class */
    .tab button.active {
    background-color: #ccc;
    }

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

    3. Add the follwing js in your script.js file

    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";
    }

    Thank You

    Pulkit

    Team Diziana

    0
  • Lisa Sedlak
    Actions pour les commentaires Permalien

    Yes. This is not working for me either. It was a couple of weeks ago. 

     

    style.css 

    /* Style the tab */

    .tab {

      overflow: hidden;

      background-color: #ff284c;

      

    }

     

    /* Style the buttons inside the tab */

    .tab button {

      background-color: inherit;

      float: left; 

      border: none;

      outline: none;

      cursor: pointer;

      padding: 14px 24px;

      transition: 0.3s;

      font-size: 16px;

      color: white;

    }

     

    /* Change background color of buttons on hover */

    .tab button:hover {

      background-color: #c2d6fd;

      font-size: 16px;

      color: #ff284c;

    }




    article_page.hbs

    <script>

    function openPlatform(evt, Platform) {

      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(Platform).style.display = "block";

      evt.currentTarget.className += " active";

    }

    // Get the element with id="defaultOpen" and click on it

    document.getElementById("defaultOpen").click();

    </script>

     

    Article HTML

    <div class="tab">

      <button id="defaultOpen" class="tablinks" onclick="openPlatform(event, “This is the first tab text”)">This is the first tab text</button>

      <button class="tablinks" onclick="openPlatform(event, “This is the second tab text”)">This is the second tab text</button>

    </div>

    <div id="This is the first tab text” class="tabcontent">

      <h2>Feed sorting</h2>

      <p>

        Sorting the main feed In the upper right corner click on the filter icon.

      </p>

      <p>A dropdown menu will appear.</p>

      <p>

        Choose “Most active,” “Most recent,” “Most commented,” “Most liked,” or “Most

        voiced.”

      </p>

      <p>&nbsp;</p>

      <h2>Sorting my profile feed</h2>

      <p>

        When you click on your profile information, you will see three feed options:

        Posts, Likes, and Voiced. Each feed is sorted chronologically so you see

        your most recent posts, likes, and Voiced.

      </p>

    </div>

    <div id="This is the second tab text" class="tabcontent">

      <h2>iOS Feed Sorting</h2>

      <p>

        Sorting the main feed In the upper right corner click on the filter icon.

      </p>

      <p>A dropdown menu will appear.</p>

      <p>

        Choose “Most active,” “Most recent,” “Most commented,” “Most liked,” or “Most

        voiced.”

      </p>

      <p>&nbsp;</p>

      <h2>Sorting my profile feed</h2>

      <p>

        When you click on your profile information, you will see three feed options:

        Posts, Likes, and Voiced. Each feed is sorted chronologically so you see

        your most recent posts, likes, and Voiced.

      </p>

    0
  • Jean Lazaro
    Actions pour les commentaires Permalien

    I tried the codes indicated in your suggestions but it still won't work.

    1
  • Lisa Sedlak
    Actions pour les commentaires Permalien

    Can we get some help with this? We are getting ready to implement it for our site and if it doesn't work, I need to find another solution. 

     

    0
  • Trapta
    Actions pour les commentaires Permalien

    Hi Jean Lazaro and Lisa Sedlak,

    If you are using the latest version of the theming template (v2), then make sure to include jQuery CDN in your document_head.hbs template or place the below line of code in your document_head.hbs template:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    Let me know if this solves your issue.

    Thanks

    0
  • Lisa Sedlak
    Actions pour les commentaires Permalien

    Nope.

    What happens is the tabs show up but do not click properly. Not sure if that is Jean Lazaro's issue or not. I see everything but the stuff that should not be on the first tab is seen. 

    If I use the London, Parism, Tokyo example, there are tabs, but no content. 

    0

Vous devez vous connecter pour laisser un commentaire.

Réalisé par Zendesk