Adding TABs in page

Software Support
1

Dear all,
I would like to add Tab in Additional Content. I created static page to try first
Here what I did
First, using the following codes

image

Second, placing the script below to Custom Tags

<script>

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

Third, adding css as follow

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

But, the tab cannot load
http://jurnalbeta.ac.id/index.php/betaJTM/tab
Ojs 3.1.0.0

@Vitaliy
@israel.cefrin

2

Tab links also require identification (id and/or href to an element). The idea is when the certain link button is clicked, specific div is becoming visible and others - don’t.
Something like (with jquery):

$("#about-link").click(function() {
   $("#indexing").removeClass("active");
   $("#about").addClass("active");
});

and in CSS you should point that element div tab without active class shouldn’t be displayed (display: none).

Or you can use ready solution from Bootstrap 3:
https://getbootstrap.com/docs/3.3/javascript/#tabs

1 Like
3

Thanks a lot @Vitaliy

4

Simple example:
https://jsfiddle.net/vitaliy_1/jkLx1qvf/1/

5

Thanks for it. I have sucessfully added it in additional content. However, in mobile view, it does not fit the screen. What css to use for customizing it in order to be fit with mobile?
http://jurnalbeta.ac.id

6

It is solved. I have set the width to 100%

7

In case I use the codes, where will I place the JS codes?