Swap content on buttons click and Next / Prev buttons

Question

I need swap content on button/number click.
If you can see on the snippet, you can access the article using buttons "1,2,3,4" or also with the Next and Prev ones. Both can access the same article. My code is already working but you need to refresh it first if you want to use the Next/Prev, or the number buttons.

$(document).ready(function() {
  $(".btn-hover div").each(function(e) {
    if (e != 0)
      $(this).hide();
  });
  

  $("#next").click(function() {
    if ($(".content5 div:visible,.content6 div:visible").next().length != 0)
      $(".content5 div:visible,.content6 div:visible").next().show().prev().hide();
    else {
      $(".content5 div:visible,.content6 div:visible").hide();
      $(".content5 div:first,.content6 div:first").show();
    }
    return false;
  });

  $("#previous").click(function() {
    if ($(".content5 div:visible,.content6 div:visible").prev().length != 0)
      $(".content5 div:visible,.content6 div:visible").prev().show().next().hide();
    else {
      $(".content5 div:visible,.content6 div:visible").hide();
      $(".content5 div:last,.content6 div:last").show();
    }
    return false;
  });


$('.btn-hover').first().addClass('btn-active');
$('.btn-hover').click(function(){
  var $this = $(this);
  $siblings = $this.parent().children(),
  position = $siblings.index($this);
  console.log (position);
  
  $('.content5 div').removeClass('btn-active').eq(position).addClass('btn-active');
  $('.content6 div').removeClass('btn-active').eq(position).addClass('btn-active');
  $siblings.removeClass('btn-active');
  $this.addClass('btn-active');
});
});








  
  
    
      
        
          1
          2
          3
        
      
    
  

  
    
      
        
          
            
              
                1
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet provident accusamus itaque suscipit adipisci
              
              
                2
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet provident accusamus itaque suscipit adipisci ullam reiciendis beatae perspiciatis impedit quam nemo asperiores, deserunt, distinctio
              
              
                3
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet provident accusamus itaque suscipit adipisci

user_383904 · Answer

Have an element for your pages with a specific ID
Place a DIV with data-tabs-pagination wherever you want
Place a DIV with data-tabs-navigation wherever you want




    Page 1 Lorem
    Page 2 Ipsum
    Page 3 Dolor

Notice how the the data-tabs-* attribute matches the target element ID selector you want to control.

A JavaScript instance with some optional Object with custom options could look like:

// Use like:
const myTabs = new Tabs("#someElement", {
  page: 1, // Start from second page (Page index 1),
  btnPrev: {innerHTML: "←", className: "btn"},
  btnNext: {innerHTML: "→", className: "btn"},
  onChange() {
    console.log(this);
  }
});

// What you can also do:
myTabs.show(0);           // Show page at index (First page = 0)
myTabs.next();            // Go to next page
myTabs.prev(2);           // Go back two pages
myTabs.next().next();     // Go forward two pages (thanks to chaining methods)
console.log(myTabs.page); // Get current page index

Doing so you can have as many Tabs / Pages, even slideshows or galleries in a single document that use the exact same script:

class Tabs {
  constructor(selector, options = {}) {
    Object.assign(
      this, {
        EL: document.querySelector(selector),
        page: 0,
        selector,
        btnTabs: {}, // Custom attributes for tabs (navigation) buttons
        btnPrev: {}, // Custom attributes for PREV button
        btnNext: {}, // Custom attributes for NEXT button
        classActive: "is-active",
        onChange: () => {},
      },
      options
    );
    this.EL_pages = this.EL.children;
    this.EL_pagination = document.querySelectorAll(`[data-tabs-pagination="${this.selector}"]`);
    this.EL_navigation = document.querySelectorAll(`[data-tabs-navigation="${this.selector}"]`);
    this.total = this.EL_pages.length;
    this.EL_prev = this._ELNew("button", {
      type: "button",
      textContent: "Prev",
      onclick: () => this.prev(),
      ...this.btnPrev,
    });
    this.EL_next = this._ELNew("button", {
      type: "button",
      textContent: "Next",
      onclick: () => this.next(),
      ...this.btnNext,
    });
    this.EL_buttons = Array.from(Array(this.total)).reduce((arr, _, i) => {
      const EL_btn = this._ELNew("button", {
        type: "button",
        textContent: i + 1,
        onclick: () => (this._page = i),
        ...this.btnPagination,
      });
      arr.push(EL_btn);
      return arr;
    }, []);
    this._init();
  }

  // Utility function - New element
  _ELNew = (sel, attr) => Object.assign(document.createElement(sel), attr || {});

  // Fix negative modulo index 
  _mod = (n) => ((n % this.total) + this.total) % this.total;

  // Initialize
  _init() {
    // Append nav buttons to DOM
    this.EL_pagination.forEach((EL) => EL.append(...this.EL_buttons));
    this.EL_navigation.forEach((EL) => EL.append(this.EL_prev, this.EL_next));

    // Set current page
    this._page = this.page;
  }

  prev(n = 1) {
    this._page -= n;
    return this;
  }

  next(n = 1) {
    this._page += n;
    return this;
  }

  show(idx) {
    this._page = idx;
    return this;
  }

  set _page(n) {
    this.page = this._mod(n);
    [...this.EL_pages, ...this.EL_buttons].forEach((EL) => EL.classList.remove(this.classActive));
    [this.EL_pages[this.page], this.EL_buttons[this.page]].forEach((EL) => EL.classList.add(this.classActive));
    // Provide a callback
    this.onChange.call(this);
  }

  get _page() {
    return this.page;
  }
}


// Use like:
const mySectionTabs = new Tabs("#section-a", {
  onChange() {
    console.clear();
    console.log(`Current page index: ${this.page}`);
  }
});

/*
  The CSS is entirely up to you,
  the only thing you need to know is that JS adds ".is-active" to both
  - the current page / slide
  - the current pagination button
*/

.css-pages > div {
  display: none;
}

.css-pages > div.is-active {
  display: block;
}

[data-tabs-pagination] > button.is-active {
  color: #0bf;
}



  Page 1 Lorem
  Page 2 Ipsum
  Page 3 Dolor

Swap content on buttons click and Next / Prev buttons

1 Answers