Change the information displayed on buttons when clicked and provide options for users to navigate between different

Question

Change the information displayed on buttons when clicked and provide options for users to navigate between different

In order to change the content when a button or number is clicked, you can utilize the buttons "1,2,3,4" or the Next and Prev buttons shown in the snippet. Both methods allow access to the same article. If you want to switch between articles using the Next/Prev buttons or the numbered buttons, simply refresh the page first.

$(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');
});
});

<!doctype html>
<html lang="en">

<head>
</head>

<body>
  <!--Navbar-->
  <div id="section1-the-timeline" class="scrollNav">
    <div class="container-fluid section section_bg_grey">
      <div class="col">
        <div Class="button-wrap timeline  px-5">
          <a href="#section2-the-timeline" class="btn-hover">1</a>
          <a href="#section2-the-timeline" class="btn-hover">2</a>
          <a href="#section2-the-timeline" class="btn-hover">3</a>
        </div>
      </div>
    </div>
  </div>

  <div id="section2-the-timeline" class="section section_secondary_bg">
    <div class="container-fluid">
      <div class="row d-flex align-items-center">
        <div class="col-md-7">
          <div class="text-center section_content">
            <div id="content5" class="content5 pb-4">
              <div class="btn-content-1 btn-active">
                <p>1</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet provident accusamus itaque suscipit adipisci</p>
              </div>
              <div class="btn-content-2">
                <p>2</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet provident accusamus itaque suscipit adipisci ullam reiciendis beatae perspiciatis impedit quam nemo asperiores, deserunt, distinctio</p>
              </div>
              <div class="btn-content-3">
                <p>3</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet provident accusamus itaque suscipit adipisci</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-md-5 img_wrapper">
          <div id="content6" class="content6">
            <div class="btn-content-1 btn-active"><img src="https://en.wikipedia.org/wiki/Image#/media/File:Image_created_with_a_mobile_phone.png"></div>
            <div class="btn-content-2"><img src="https://en.wikipedia.org/wiki/Image#/media/File:Image_created_with_a_mobile_phone.png"></div>
            <div class="btn-content-3"><img src="https://en.wikipedia.org/wiki/Image#/media/File:Image_created_with_a_mobile_phone.png"></div>
           
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="chevron">
    <div class="d-flex justify-content-center middle-chevron">
      <button id="previous" class="btn btn-chevron"><i class="fas fa-chevron-left"></i></button>
      <button id="next" class="btn btn-chevron"><i class="fas fa-chevron-right"></i></button>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  
  <script src="js/animation.js"></script>
</body>

</html>

javascript html jquery css button

Answer 1

Answer №1

Make sure to assign a specific ID to the element representing your pages
Add a DIV with data-tabs-pagination where desired in the document
Add a DIV with data-tabs-navigation wherever it's needed

<div data-tabs-pagination="#someElement"><!-- This will be filled by JavaScript --></div>

<div id="someElement" class="css-pages"&gт;
    <div>Page 1 Lorem</div>
    <div>Page 2 Ipsum</div>
    <div>Page 3 Dolor</div>
</div>

<div data-tabs-navigation="#someElement"><!-- This will be filled by JavaScript --></div>

It's important that the data-tabs-* attribute matches the target element ID selector for proper control.

An example of using this script could look like:

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

// Additional functions you can use:
myTabs.show(0);           // Display page at index (First page = 0)
myTabs.next();            // Move to next page
myTabs.prev(2);           // Go back two pages
myTabs.next().next();     // Progress forward two pages (via method chaining)
console.log(myTabs.page); // Get current page index

By following this structure, you can incorporate multiple tabs or slideshows within one document utilizing the same script:

class Tabs {
  constructor(selector, options = {}) {
    Object.assign(
      this, {
        EL: document.querySelector(selector),
        page: 0,
        selector,
        btnTabs: {},
        btnPrev: {},
        btnNext: {},
        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();
  }

  _ELNew = (sel, attr) => Object.assign(document.createElement(sel), attr || {});

  _mod = (n) => ((n % this.total) + this.total) % this.total;

  _init() {
    this.EL_pagination.forEach((EL) => EL.append(...this.EL_buttons));
    this.EL_navigation.forEach((EL) => EL.append(this.EL_prev, this.EL_next));

    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));
    this.onChange.call(this);
  }

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


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

/*
  The actual CSS styling is customizable based on your needs.
  Just remember JS applies ".is-active" to both:
  - the currently displayed 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;
}

<div data-tabs-pagination="#section-a"></div>
<div id="section-a" class="css-pages">
  <div>Page 1 Lorem</div>
  <div>Page 2 Ipsum</div>
  <div>Page 3 Dolor</div>
</div>
<div data-tabs-navigation="#section-a"></div>

Answer 2

Make sure to assign a specific ID to the element representing your pages
Add a DIV with data-tabs-pagination where desired in the document
Add a DIV with data-tabs-navigation wherever it's needed

<div data-tabs-pagination="#someElement"><!-- This will be filled by JavaScript --></div>

<div id="someElement" class="css-pages"&gт;
    <div>Page 1 Lorem</div>
    <div>Page 2 Ipsum</div>
    <div>Page 3 Dolor</div>
</div>

<div data-tabs-navigation="#someElement"><!-- This will be filled by JavaScript --></div>

It's important that the data-tabs-* attribute matches the target element ID selector for proper control.

An example of using this script could look like:

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

// Additional functions you can use:
myTabs.show(0);           // Display page at index (First page = 0)
myTabs.next();            // Move to next page
myTabs.prev(2);           // Go back two pages
myTabs.next().next();     // Progress forward two pages (via method chaining)
console.log(myTabs.page); // Get current page index

By following this structure, you can incorporate multiple tabs or slideshows within one document utilizing the same script:

class Tabs {
  constructor(selector, options = {}) {
    Object.assign(
      this, {
        EL: document.querySelector(selector),
        page: 0,
        selector,
        btnTabs: {},
        btnPrev: {},
        btnNext: {},
        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();
  }

  _ELNew = (sel, attr) => Object.assign(document.createElement(sel), attr || {});

  _mod = (n) => ((n % this.total) + this.total) % this.total;

  _init() {
    this.EL_pagination.forEach((EL) => EL.append(...this.EL_buttons));
    this.EL_navigation.forEach((EL) => EL.append(this.EL_prev, this.EL_next));

    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));
    this.onChange.call(this);
  }

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


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

/*
  The actual CSS styling is customizable based on your needs.
  Just remember JS applies ".is-active" to both:
  - the currently displayed 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;
}

<div data-tabs-pagination="#section-a"></div>
<div id="section-a" class="css-pages">
  <div>Page 1 Lorem</div>
  <div>Page 2 Ipsum</div>
  <div>Page 3 Dolor</div>
</div>
<div data-tabs-navigation="#section-a"></div>

Change the information displayed on buttons when clicked and provide options for users to navigate between different

Answer №1

Similar questions

How can one extract information from an ASP.NET MVC on a separate webpage?

Incorrect input

Utilizing Codeigniter for transmitting JSON data to a script file

The VueRouter is unresponsive and not functioning as expected

Mixing CSS layers

Is there a way to make the header reach the full width of the page?

What is the best way to include temporary attributes on a mongoose object solely for the purpose of a response, without saving them to the database

Can you list out the directives that are responsible for generating child scopes in AngularJS?

Using a custom module in node.js to retrieve data from a mysql database

Is it possible to disable the "super must be called before accessing this keyword" rule in babelify?

Switching the mouse cursor when the mousedown event occurs

Manipulating text alignment and positioning in CSS

Prevent the Append button from being clicked when a duplicate entry is detected in jQuery

Encoding data using Angular

Is it possible to refresh the Dictionary using data from localStorage?

Enable Parse5's case sensitivity

How to access a webpage on your Android device without the address bar visible

Can you identify any issues with this Basic authentication code for an HTTP-Get request?

Is it possible to design and implement Materialize CSS inputs without relying on Materialize CSS?'

Static Header - Halts Animation on Downward Scroll, Resumes when Scrolling Ceases