I have 2 UI tabs. I need to activate one specific tab on clicking a button outside that tab

Question

I'm new to Javascript. I have a UI tab element. Which has 2 tabs. I have a button on the bottom. On clicking that button it should go up and activate the second tab.

<style>
        .tab-container {
    overflow-x: hidden;
    color: #fff;
    width: 35%;
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 0;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    animation-delay: 0.7s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
}

.activeTab-indicator {
  display: inline-block;
  height: 2px;
  width: 50%;
  background-color: #fff;
  transition: transform 0.4s ease-out;
}

.tabHeader-container {
    display: flex;
    justify-content: space-between;
    label{
//      border-radius: 10px;
    }
}

.tabContent-container {
  display: flex;
  transition: transform 0.4s ease-out;
}

.tabHeader {
    cursor: pointer;
    color: #000;
    transition: color 0.4s ease;
    padding: 19px 20px;
    flex-grow: 1;
    text-transform: uppercase;
    text-align: center;
    background: rgba(255, 255, 255, 0.92);
    font-size: 11px;
    letter-spacing: 0.4px;
    width: 50%;
}

.tabContent {
    width: 100%;
    flex-shrink: 0;
    padding: 30px 30px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.95);
    color: #000;
    height: 100%;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

.tabContent h4 {
    margin: 0px 0px 20px 0px;
    text-align: center;
    font-size: 20px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.radioInput:nth-of-type(1):checked ~ .tabContent-container {
  transform: translateX(0);
}

.radioInput:nth-of-type(1):checked ~ .tabHeader-container .tabHeader:nth-of-type(1) {
    color: $primary;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.95);
}


.radioInput:nth-of-type(2):checked ~ .tabContent-container {
  transform: translateX(-100%);
}

.radioInput:nth-of-type(2):checked ~ .tabHeader-container .tabHeader:nth-of-type(2) {
    color: $primary;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.95);
}
    </style>

<div class="tab-container">
        <input type="radio" name="radio" class="radioInput" id="consultation" checked hidden/>
        <input type="radio" name="radio" class="radioInput" id="brochure" hidden/>
        <div class="tabHeader-container">
          <label for="consultation" class="tabHeader">Tab1</label>
          <label for="brochure" class="tabHeader">Tab2</label>
        </div>
        <div class="tabContent-container">
          <div class="tabContent consultation-content">
            <h4>Tab 1</h4>

          </div>
          <div class="tabContent brochure-content">
            <h4>Tab 2</h4>

          </div>
        </div>
      </div>


<a href="#" class="btn" alt="Tab2">Tab 2</a>




<script>
    $('.tabs-stage div').hide();
    $('.tabs-stage div:first').show();
    $('.tabs-nav li:first').addClass('tab-active');


    $('.tabs-nav a').on('click', function (event) {
    event.preventDefault();
    $('.tabs-nav li').removeClass('tab-active');
    $(this).parent().addClass('tab-active');
    $('.tabs-stage section').hide();
    $($(this).attr('href')).show();
    });
    </script>

I have already smooth scroll. When clicking on button it should automatically go up and activate that tab. But don't know how to do it, it is not working for me.

Answer 1

<a href="#" id="tab2" class="btn" alt="Tab2">Tab 2</a>
<a href="#" id="tab1" class="btn" alt="Tab2">Tab 1</a>

<script>
        $(document).ready(function(){
            $('#tab2').on('click', function (event) {
                $('#consultation').prop("checked", true);
            });
            $('#tab1').on('click', function (event) {
                $('#brochure').prop("checked", true);
            });
        });
</script>

Answer 2

I have used $("label:last").trigger("click") in code replace and check

    $('.tabs-stage div:first').show();
    $('.tabs-nav li:first').addClass('tab-active');


    $('#tab2').on('click', function (event) {
    event.preventDefault();


    $("label:last").trigger("click")


    });

Answer 3

You can set the checked value by adding a handler on the button as follows:

Just add the following:

  $('.btn').on('click', function (event) {
     $('#brochure').prop('checked', true);
  });

This will trigger the checked state in your css.