Activate Tabpanel from Another Tabpanel

activate tabpanel from another tabpanel

Some small clarifications on the arguments value, id, and value working from @DeanAttali's reprex:

library("shiny")
library("shinyjs")
library("V8") ## Required for shinyjs::extendShinyjs()

## JavaScript that dis/enables the ABILITY to click the tab (without changing aesthetics)
app_jscode <-
  "shinyjs.disableTab = function(name) {
    var tab = $('.nav li a[data-value=' + name + ']');
    tab.bind('click.tab', function(e) {
      e.preventDefault();
      return false;
    });
    tab.addClass('disabled');
  }
  shinyjs.enableTab = function(name) {
    var tab = $('.nav li a[data-value=' + name + ']');
    tab.unbind('click.tab');
    tab.removeClass('disabled');
  }"
## css snipit that makes it LOOK like we are/n't able click the tab (with outchanging functionality)
app_css <-
  ".nav li a.disabled {
    background-color: #aaa !important;
    color: #333 !important;
    cursor: not-allowed !important;
    border-color: #aaa !important;
  }"

ui = fluidPage(
  shinyjs::useShinyjs(),
  shinyjs::extendShinyjs(text = app_jscode),
  shinyjs::inlineCSS(app_css),
  navbarPage(title = "Navbar title!", id = "navbarid",
             tabPanel(title = "tab1", ## id and value args not needed
                      br(),
                      p("in tab 1."),
                      actionButton("btn", label = "toggle locked tabs")),
             tabPanel(title = "tab2", ## id and value args not needed
                      p("in tab 2."))
  )
)
server = function(input, output, session) {
  ## Disable tab2 on page load
  js$disableTab("tab2")
  
  observeEvent(input$btn, {
    ## Enable tab2 when clicking the button
    shinyjs::js$enableTab("tab2") ## On a tab's title
    ## Switch to tab2
    updateNavbarPage(session, "navbarid", "tab2") ## On navbar's id, tab's title
    #### Taking it further: 
    ## Also disable tab1 as a selection
    shinyjs::js$disableTab("tab1")
  })
}
shinyApp(ui = ui, server = server)

Bootstrap 4: Open tab from inside a tab (second link)

Below solution is based on the one you have seen already at my quoted answer, but this one is extending on that with the scroll-to functionality you also want to incorporate.

Essentially, the scroll-to can be easily achieved with the native Element.scrollIntoView() javascript method.

Note: In the example, I've put a bit of margins to the tabs in order to better showcase the functionality.

$('.tab-link').on('click', function(event) {

    // Prevent url change

    event.preventDefault();

    // `this` is the clicked <a> tag

    var target = $('[data-toggle="tab"][href="' + this.hash + '"]');

    

    // opening tab

    target.trigger('click');

    // scrolling into view

    target[0].scrollIntoView(true);

});

#nav {

    margin-top: 90vh;

}

#nav-tabContent {

    margin-bottom: 90vh;

}

<nav id="nav">

    <div class="nav nav-tabs" id="nav-tab" role="tablist">

        <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>

        <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>

        <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>

    </div>

</nav>

<div class="tab-content" id="nav-tabContent">

    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">

      <a class="tab-link" href="#nav-contact">LINK TO THIRD TAB</a>

    </div>

    <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>

    <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>

</div>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Jump to specific tab from another tab with Bootstrap's nav-tabs

You might have been put on the the wrong foot by the other answers you mention ... it is fairly trivial to change tabs from within the same page (regardless if you're in another tab or not): you can use the basic bootstrap tab navigation Javascript for this.

First change your html a bit: add an id to your <ul class="nav nav-tabs" id="myTab">.. then add a link to your second tab:

<div class="tab-pane fade" id="profile">
  <form id="tab2">
    <a href="#" id="gotohome">Jump to home tab (this works)</a>
...

and add the following in your document ready:

$('#gotohome').click(function() {
  $('#myTab a[href="#home"]').tab('show');
});

Working example at jsFiddle.

Change bootstrap tabs when coming from another page

The answer you are looking for is probably here, take a look.

Bootstrap tabs opening tabs on another page

How to redirect to another tabpanel tab when button is submited in a MVC

It would be too complicated to solve this by Ajax, because there is a lot of items to loop throught, so I decided to solve this on another way.

What I did here was next:

• Defined ViewBag in a Controller on a Method which is being invoked when form is submited on a second tab
• Passed that ViewBag to this View, and checked if there is value in a ViewBag, so if yes, then set third Tab as active, soon I will post my code, because I'm writing this answer from my mobile phone right now! :)

But theoreticaly that was how I solved this

Bootstrap tabpanel which tab is selected

check this

var id = $('.tab-content .active').attr('id');
if(id == "delayedspiff") {
    alert("delayedspiff");
}
else {
    alert("instantspiff");
}

when they click on a tab add this

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    // here is the new selected tab id
    var selectedTabId = e.target.id;
});

Linking to a Bootstrap Tab from outside - how to set the tab to active ?

You can do a small trick to achieve this:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var target = this.href.split('#');
    $('.nav a').filter('[href="#'+target[1]+'"]').tab('show');
})

http://jsfiddle.net/s6bP9/

---

Related Topics