Membuat Tab Vertikal

Tab Vertikal

Manfaat :
Tab vertikal ini bisa dimanfaatkan untuk meringkas materi atau postingan sehingga menjadi lebih rapi dan memudahkan pengunjung untuk membaca informasi yang disajikan karena tidak membutuhkan banyak scroll halaman pada saat membacanya.

Tab Vertikal demo - Klik tombol untuk uji coba:

---

Materi 1

Ini adalah isi dari Materi 1 untuk tombol yang diklik.

Materi 2

Ini adalah isi dari Materi 2 untuk tombol yang diklik.

GLOBE

Materi 3

Ini adalah isi dari Materi 3 untuk tombol yang diklik.

GLOBE ASIA

Materi 4

Ini adalah isi dari Materi 4 untuk tombol yang diklik.

GLOBE AMERICA

Materi 5

Ini adalah isi dari Materi 5 untuk tombol yang diklik.

GLOBE AFRICA

---

Kode CSS :

Copy dan edit sesuai selera untuk menyesuaikan tampilannya.
Letakkan diatas kode </skin> atau jika tidak ingin ribet, taruh dalam widget HTML / Javascript melalui halaman Tata Letak bersama dengan scriptnya yang ada dibagian bawah.
Atau bisa juga dalam HTML postingan jika hanya dipakai untuk penggunaan khusus.

<style>
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}
h3{
    padding:5px;
    background:#f5f5f5
}

/* CSS area tab */
.tab {
    float: left;
    background-color: transparent;
    width: 19%;
    height: 300px;
    margin-right:5px
}

/* CSS tombol tab menu normal */
.tab button {
    display: block;
    background-color: #f0f0f0;
    border:1px solid #ccc;
    color: black;
    padding: 5px 10px;
    margin-bottom:4px;
    width: 100%;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
    font-size: 17px;
}

/* CSS background tombol saat hover / disorot */
.tab button:hover {
    box-shadow:1px 2px 4px #999;
}

/* CSS untuk tombol active/ terbuka "tab button" */
.tab button.active {
    background-color: #fff;
    border:1px solid #ddd;
    border-top:none;
    border-left:none;
    border-right:3px solid #ccc;
    border-bottom:3px solid #ccc;
    box-shadow:0 4px 4px #999;
    width:106%;
    overflow:show
}

/* CSS untuk area isi materi*/
.tabcontent {
    float: left;
    background:#fff;
    padding: 0px 12px;
    border: 1px solid #ddd;
    border-left:3px solid #ccc;
    box-shadow:0 4px 4px #999;
    width: 79%;
    height: 300px;
}
</style>

Kode HTML :

Silahkan ganti dan sesuaikan teks yang berwarna coklat dengan kebutuhan.

<div class="tab">
  <button class="tablinks" onclick="openInfo(event, '1')" id="defaultOpen">Materi 1</button>
  <button class="tablinks" onclick="openInfo(event, '2')">Materi 2</button>
  <button class="tablinks" onclick="openInfo(event, '3')">Materi 3</button>
  <button class="tablinks" onclick="openInfo(event, '4')">Materi 4</button>
  <button class="tablinks" onclick="openInfo(event, '5')">Materi 5</button>
</div>

<div id="1" class="tabcontent">
  <h3>Materi 1</h3>
  <p>Ini adalah isi dari <b>Materi 1</b> untuk tombol yang diklik.</p>
</div>

<div id="2" class="tabcontent">
  <h3>Materi 2</h3>
  <p>Ini adalah isi dari <b>Materi 2</b> untuk tombol yang diklik.</p>
</div>

<div id="3" class="tabcontent">
  <h3>Materi 3</h3>
  <p>Ini adalah isi dari <b>Materi 3</b> untuk tombol yang diklik.</p>
</div>

<div id="4" class="tabcontent">
  <h3>Materi 4</h3>
  <p>Ini adalah isi dari <b>Materi 2</b> untuk tombol yang diklik.</p>
</div>

<div id="5" class="tabcontent">
  <h3>Materi 5</h3>
  <p>Ini adalah isi dari <b>Materi 2</b> untuk tombol yang diklik.</p>
</div>

Kode Script :

Script ini untuk mengatur animasi tampilan.

<script>
function openInfo(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";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>

Selamat Mencoba