CODEWITHSUNDEEP
javascriptjquerytabs
BobbyJones
BobbyJones

Reputation: 1354

Automatically moving to next/prev UL LI Tab when closing a tab

I really need the help of the experts and code gurus on this site to be able to accomplish what seems to be the impossible for my skill level. My goal is to be able close a tab using the close button and then the selected tab will be closed and the next view will either move to the right left or right tab depending on the tab.

Each and every time a tab is closed by the user, the default action would be to automatically select the adjacent tab to the left.

If there are no tabs left to close, the UL LI list the css is set to display: none

So, essentially, how would the EQ(#) be automatically calculated to that effect. I put in the number just to use for an example, but the code would need to determine what the previous tab to select is?

Here is a fiddle: https://jsfiddle.net/5ju8rq8h/

Here is the HTML/CSS:

<div id="main" style="display: inline-block; width: 983px;">
  <ul class="tabs">
    <div class="close_wrapper">
      <li><a href="#tab1">XAL-2017-482336</a><span class="close"></span></li>
    </div>
    <div class="close_wrapper">
      <li><a href="#tab2">A-2017-00471</a><span class="close"></span></li>
    </div>
    <div class="close_wrapper">
      <li><a href="#tab3">A-2017-00123</a><span class="close"></span></li>
    </div>
    <div class="close_wrapper">
      <li><a href="#tab4">A-2017-00456</a><span class="close"></span></li>
    </div>
  </ul>

  <div class="tab_container">
    <div class="tab_wrapper">

      <!--BEGIN DIV TAB 1 -->
      <div id="tab1" class="tab_content"></div>
      <!--END DIV TAB 1 -->

      <!--BEGIN DIV TAB 2 -->
      <div id="tab2" class="tab_content"></div>
      <!--END DIV TAB 2 -->

      <!--BEGIN DIV TAB 3 -->
      <div id="tab3" class="tab_content"></div>
      <!--END DIV TAB 3 -->

      <!--BEGIN DIV TAB 4 -->
      <div id="tab4" class="tab_content"></div>
      <!--END DIV TAB 4 -->

    </div>
    <!-- END DIV main  -->

Here is the code in question to be modified:

function init_form() {

    //INITIALIZE TABS
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return false;       
    });

    $('span.close').on('click', function() {

        var tab = $(this).parent().find("a").attr("href") 
        //alert(tab)

        $(this).parent().remove()//Removes tab

        $(tab).hide().remove()//Remnoves content

        $("ul.tabs li").eq(1).click()//eq() is zero based

    });


}

Upvotes: 0

Views: 536

Answers (1)

Peter Stark
Peter Stark

Reputation: 608

https://jsfiddle.net/sudarpochong/5ju8rq8h/11/

Made some changes to your close event handler. To find the previous tab, we need to find what's the index of current tab. And check if it's active tab or not.

  • If it's active tab, select prev tab (minus 1)
  • (if current tab index is 0 - first tab, move to next tab)
  • If it's not active tab, just close the tab

Code:

// Close click event handler
$('.close').on('click', function() {

  var tabId = $(this).parent().find("a").attr("href");
  // console.log("close clicked", tabId, this);

  // Find the parent li where close is invoked
  var parentLi = $(this).parent("li");
  // console.log("close clicked", this, parentLi);

  // Get the index of the li, and check if it's active tab
  var indexToClose = $("ul.tabs li").index(parentLi);
  var isActive = parentLi.hasClass("active");
  // console.log("close clicked, indexToClose?", indexToClose, "isActive?", isActive);

  var tabsLength = $("ul.tabs li").length;
  // If current tab is active, find the prev tab, otherwise do nothing (just close the tab)
  if (isActive) {
    var nextIndex = (indexToClose - 1);
    if (nextIndex < 0) {
        nextIndex = indexToClose + 1;
    }

    //console.log("close clicked", "tabs-length", tabsLength, "nextIndex", nextIndex);
    $("ul.tabs li").eq(nextIndex).find("a").click();
  }

  $(this).parent().remove(); // Removes tab
  $(tabId).remove(); // Removes content

    tabsLength = $("ul.tabs li").length;
  if (tabsLength == 0) {
    $(".tabs").hide();
    $(".tab_container").hide();
  }

});

Upvotes: 1

Related Questions