Multi slider function

Question

I created a function slider that fades the next section in and out, but not happy how I created the functions as I need to change the function each time I create a new section.

There a way to change this setup where only one function is needed so I can have 100 sections and just one function? Not 100 functions for each section to add/remove classes?

$('#toSlide-2').on('click', function (event) {
       event.preventDefault();
       $('#slide-1').removeClass('in-view').addClass('out-of-view');
       $('#slide-2').addClass('in-view');
 })
 $('#toSlide-3').on('click', function (event) {
       event.preventDefault();
       $('#slide-2').removeClass('in-view').addClass('out-of-view');
       $('#slide-3').addClass('in-view');
 })
 $('#toSlide-4').on('click', function (event) {
       event.preventDefault();
       $('#slide-3').removeClass('in-view').addClass('out-of-view');
       $('#slide-4').addClass('in-view');
 })

.out-of-view{
  opacity:0;
  }
.in-view{
  opacity:1;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="slide-1" class="in-view">
  <h2>form 1</h2>
  <button id="toSlide-2">button</button>
</form>

<form id="slide-2" class="out-of-view">
  <h2>form 2</h2>
    <button id="toSlide-3">button</button>
</form>

<form id="slide-3" class="out-of-view">
  <h2>form 3</h2>
    <button id="toSlide-4">button</button>
</form>

<form id="slide-4" class="out-of-view">
  <h2>form 4 - done</h2>
</form>

Answer 1

Here is a pure JS function that will dynamically take the elements using a class selector and iterate over them and use the key word this in an event listener to select the next element sibling and add/remove class names.

Note: I added a class named forms and use that to get the element list of forms to use in the forEach loop.

Also, I suggest using display: none/block instead of opacity. This will keep the elements from pushing down the page with each iteration of selecting a button.

// get your element list
const forms = document.querySelectorAll(".forms");

// iterate over the element list using forEach()
forms.forEach(function(v){
  // foreach value in the list, set a click event listener
  v.addEventListener('click', function(e){
    e.preventDefault();
    // now use the key word 'this' to add/remove class names
    // then target the next sibling in the list to add/remove class names
    this.classList.remove("in-view");
    this.classList.add("out-of-view");
    this.nextElementSibling.classList.remove('out-of-view');
    this.nextElementSibling.classList.add('in-view');
  })
})

.out-of-view{
  display:none;
  }
.in-view{
  display:block;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="slide-1" class="in-view forms">
  <h2>form 1</h2>
  <button id="toSlide-2">button</button>
</form>

<form id="slide-2" class="out-of-view forms">
  <h2>form 2</h2>
    <button id="toSlide-3">button</button>
</form>

<form id="slide-3" class="out-of-view forms">
  <h2>form 3</h2>
    <button id="toSlide-4">button</button>
</form>

<form id="slide-4" class="out-of-view forms">
  <h2>form 4 - done</h2>
</form>

JQuery Version:

No matter how many form elements in your HTML, as long as they have the class forms, they will be iterated over and processed in the function.

Also, use less lines of code and change the css directly in your JQuery using .css()

// get your element list
const $forms = $(".forms");

// iterate over the element list using.each()
$forms.each(function() {
  // use $(this) to define the element being clicked on
  $(this).click(function(e) {
    e.preventDefault();
    $(this).css('display', 'none');
    $(this).next().css('display', 'block');
  })
})

.out-of-view {
  display: none;
}

.in-view {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="slide-1" class="in-view forms">
  <h2>form 1</h2>
  <button id="toSlide-2">button</button>
</form>

<form id="slide-2" class="out-of-view forms">
  <h2>form 2</h2>
  <button id="toSlide-3">button</button>
</form>

<form id="slide-3" class="out-of-view forms">
  <h2>form 3</h2>
  <button id="toSlide-4">button</button>
</form>

<form id="slide-4" class="out-of-view forms">
  <h2>form 4 - done</h2>
</form>

Answer 2

This is a simplified version of a working solution using jQuery.

$('.buttons').on('click', function (event) {
       event.preventDefault();
       $(this).parent().removeClass('in-view').addClass('out-of-view');
       $(this).parent().next().addClass('in-view');
 })

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

<form id="slide-1" class="in-view">
  <h2>form 1</h2>
  <button class="buttons">button</button>
</form>

<form id="slide-2" class="out-of-view">
  <h2>form 2</h2>
    <button class="buttons">button</button>
</form>

<form id="slide-3" class="out-of-view">
  <h2>form 3</h2>
    <button class="buttons">button</button>
</form>

Answer 3

you can use the data attribute to determine which element id would be showed next like so:

function init() {
  $('.in-view').show();
  $('.out-of-view').hide();
}

function slide(slideId1, slideId2) {
  $(`#${slideId1}`).hide();
  $(`#${slideId2}`).show();
}

$('.slide-btn').on('click', function (event) {
  event.preventDefault();
  slide($(this).parent().attr("id"), $(this).data("next"));
});

init();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="slide-1" class="in-view">
  <h2>form 1</h2>
  <button class="slide-btn" data-next="slide-2">button</button>
</form>

<form id="slide-2" class="out-of-view">
  <h2>form 2</h2>
    <button class="slide-btn" data-next="slide-3">button</button>
</form>

<form id="slide-3" class="out-of-view">
  <h2>form 3</h2>
    <button class="slide-btn" data-next="slide-4">button</button>
</form>

<form id="slide-4" class="out-of-view">
  <h2>form 4 - done</h2>
</form>