How to create simmilar buttons on js?

Hello !
I’m trying to make simmilar functionality in js…
How to create simmilar buttons on js ?

Here’s the code and on codepen https://codepen.io/shchdmitrii/pen/ExWvbZZ

<style>
.tab {
  padding: 0 0 0 8px;
  width: 100%;
}
@media screen and (min-width: 1112px) {
  .tab {
    padding: 0 0 0 16px;
  }
}
.tab-nav {
  display: flex;
  margin-bottom: 10px;
}
.tab-nav > .nav {
  border-image-source: url(../images/smth.png);
  border-image-slice: 24 fill;
  border-image-repeat: repeat;
  border-image-width: 12px;
  box-sizing: content-box;
  display: inline-block;
  height: 36px;
  line-height: 36px;
  padding: 0 9px;
  position: relative;
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  width: 100%;
  flex: 1;
  text-align: center;
}
@media screen and (min-width: 1112px) {
  .tab-nav > .nav {
    height: 58px;
    line-height: 56px;
  }
}
.tab-nav > .nav:not(:last-child) {
  margin-right: 8px;
}
.tab-nav .ctrl-label {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: block;
  cursor: pointer;
  margin: 0;
}
.tab-container {
  overflow: none;
}
.tab-container-block {
  display: none;
  height: 100%;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}
.tab .ctrl-radios {
  display: none;
}
.tab #tab-0-ctrl:checked ~ .tab-container #tab-0 {
  display: block;
}
.tab #tab-1-ctrl:checked ~ .tab-container #tab-1 {
  display: block;
}
.tab #tab-2-ctrl:checked ~ .tab-container #tab-2 {
  display: block;
}
.tab #tab-3-ctrl:checked ~ .tab-container #tab-3 {
  display: block;
}
.tab #tab-0-ctrl:checked ~ .tab-nav #nav-0 {
  border-image-source: url(../images/smth1.png);
}
.tab #tab-1-ctrl:checked ~ .tab-nav #nav-1 {
  border-image-source: url(../images/smth1.png);
}
.tab #tab-2-ctrl:checked ~ .tab-nav #nav-2 {
  border-image-source: url(../images/smth1.png);
}
.tab #tab-3-ctrl:checked ~ .tab-nav #nav-3 {
  border-image-source: url(../images/smth1.png);
}

</style>
<div class="tab">
  <input id="tab-0-ctrl" class="ctrl-radios" type="radio" name="tab-radios">
  <input id="tab-1-ctrl" class="ctrl-radios" type="radio" name="tab-radios">
  <input id="tab-2-ctrl" class="ctrl-radios" type="radio" name="tab-radios">
  <input id="tab-3-ctrl" class="ctrl-radios" type="radio" name="tab-radios">

  <div class="nav" id="nav-0">
    <label class="ctrl-label" for="tab-0-ctrl">Test 0</label>
  </div>
  
  <div class="nav" id="nav-1">
    <label class="ctrl-label" for="tab-1-ctrl">Test 1</label>
  </div>
  
  <div class="nav" id="nav-2">
    <label class="ctrl-label" for="tab-2-ctrl">Test 2</label>
  </div>
  
  <div class="nav" id="nav-3">
    <label class="ctrl-label" for="tab-3-ctrl">Test 3</label>
  </div>

  <div class="tab-container">
    <div class="tab-container-block" id="tab-0">
      <ul class="grid-view" data-grid="vertical">
        <h2>Test 0</h2>
      </ul>
      <h2>test main</h2>
    </div>

    <div class="tab-container-block" id="tab-1">
      <ul class="grid-view" data-grid="vertical">
        <h2>Test 1</h2>
      </ul>
    </div>

    <div class="tab-container-block" id="tab-2">
      <h2>Test 2</h2>
    </div>

    <div class="tab-container-block" id="tab-3">
      <ul class="grid-view" data-grid="vertical">
        <h2>Test3</h2>
      </ul>
    </div>
  </div>
</div>

shchdmitrii

Are you asking how to make the label elements with class ctrl-label look like buttons using CSS?

This buttons work already with images (as you can see in css ) " …/images/smth.png and …/images/smth1.png" so the actual images are not “uploaded anywhere”…

So I’m asking how to make simmilar functionality in js

shchdmitrii

If you want to use JavaScript to make an element appear or disappear:

I guess this might work for using a label to make the element with id tab-1 appear wile the others in its class don’t:

const nav1Label = document.querySelector("#nav-1 label");

nav1Label.addEventListener("click", function whenClickNavLabel() {

     let collection = getElementsByClassName("tab-container-block");
     // code below removes inline style's display property for all elements in the class:
     for (let element of collection) { 
        element.style.removeProperty("display");
     }
     // set inline style's display property to be "block" for one element only:
     const tab1 = document.getElementById("tab-1");  
     tab1.style.display = "block";
  } 
);