Tabs HTML code are not working

Hey,

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

Thank You

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

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>

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

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. 

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

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. 

Hi Pulkit,

The article editor does not support certain parts of the HTML presented here. For example: 

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

It will just remove it once saved. When I plug in the suggested code in the editor it will save it like this. You can see the code mentioned above is removed.

<div class="tab">LondonParisTokyo</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>

How can we bypass this?

Mirjam

Hi @Mirjam Happel

By default Zendesk Guide strips what it seems to be unsafe content from articles.  This includes some of the markup that you're using and is clearly required for your tabs to function.

You could try allowing unsafe content within your articles to see if that solves your problem.

Hope that helps!

Jim

Zenplates - Custom themes, plugins and apps for Zendesk