'Javascript: Button onclick showing next div

I'm trying to make a thing with JavaScript that where I click on a button it shows the next div and the one after that and more. So it's a 'next' button. It would also be nice to have a 'previous' button.

I've tried everything, but can't seem to find the solution. I'd really appreciate some advice or help, thank you!

Any help please?

<div id="wrapper">
    <div class="featured">
      <input id="button-next" type="button" value="next"/>
      <img src="photos/bookcover/Alluredbyyou.jpg" alt="" srcset="">
      <p>ALLURED BY YOU</p>
      <span>Lorem text part 1</span>
    </div>
    <div class="featured2">
      <input id="button-next" type="button" value="next"/>
      <img src="photos/bookcover/Notyourmarrysue.jpg" alt="" srcset="">
      <p>Rebecca Frost</p>
      <span>Lorem text part 2</span>
    </div>  
  </div>

  <script>
$(document).on('click','#button-next', function() {
     $('.featured').removeClass('featured2').next('.featured').addClass('active');
});

</script>

.featured, .featured2 {
  float: left;
  margin-left: 16%;
  margin-top: 4%;
  width: 980px;
  height: 450px;
  background-color: #CFD0CD;

}
.featured img, .featured2 img {
  width: 230px;
  height: 360px;
  margin-top:4%;
  margin-left: 5%;
  float: left;

}
.featured p, .featured2 p{
  float: right;
  margin-top: 5%;
  margin-bottom: 0%;
  margin-right: 51%;
  width: 18%;
  
  font-size: 20px;
  font-family:'poppins';
  text-align: left;

}
.featured span, .featured2 span {
  float: right;
  margin-top: 0%;
  margin-right: 4%;
  width: 65%;

  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;

    height: 75%;
  text-align: left;
  word-wrap: break-word;
  word-break:normal;
  line-height: 30px;
  white-space: inherit;

}
#button-next{
    color: #000000;
    float: right;
    font-size: 19px;
    border: 3px solid #000000;
    padding: 5px 50px;
    margin-right: 0%;
    margin-top: 0%;
    letter-spacing: 1px;
    cursor: pointer;
    transform: scale(1.0);
    transition: ease-in-out 0.5s;

  }
  #button-next:hover {
    transform: scale(0.9);
    transition: ease-in-out 0.5s;
  }

Solution 1:^[1]

Here's a simple solution in Vanilla JavaScript

const scrollButtons = document.querySelectorAll('.slide-btn')
const slideItems = Array.apply(
    null,
  document.querySelectorAll('.slide-item')
)

const getActiveIndex = () => slideItems.findIndex(item => {
    return item.classList.contains('active')
})

scrollButtons.forEach(btn => {
    btn.addEventListener('click', ({ target }) => {
    const activeIndex = getActiveIndex()
    slideItems[activeIndex].classList.remove('active')

    let newActiveIndex
    if (target.id === 'previous') {
      newActiveIndex = activeIndex === 0 ? slideItems.length - 1 : activeIndex - 1
    } else {
      newActiveIndex = activeIndex === slideItems.length - 1 ? 0 : activeIndex + 1
    }

    slideItems[newActiveIndex].classList.add('active')
  })
})

.featured, .featured2 {
  float: left;
  margin-left: 16%;
  margin-top: 4%;
  width: 980px;
  height: 450px;
  background-color: #CFD0CD;

}
.featured img, .featured2 img {
  width: 230px;
  height: 360px;
  margin-top:4%;
  margin-left: 5%;
  float: left;

}
.featured p, .featured2 p{
  float: right;
  margin-top: 5%;
  margin-bottom: 0%;
  margin-right: 51%;
  width: 18%;
  
  font-size: 20px;
  font-family:'poppins';
  text-align: left;

}
.featured span, .featured2 span {
  float: right;
  margin-top: 0%;
  margin-right: 4%;
  width: 65%;

  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;

    height: 75%;
  text-align: left;
  word-wrap: break-word;
  word-break:normal;
  line-height: 30px;
  white-space: inherit;

}

#wrapper div:not(.active) {
  display: none;
}

.slide-btn {
    color: #000000;
    float: right;
    font-size: 19px;
    border: 3px solid #000000;
    padding: 5px 50px;
    margin-right: 0%;
    margin-top: 0%;
    letter-spacing: 1px;
    cursor: pointer;
    transform: scale(1.0);
    transition: ease-in-out 0.5s;

  }
  .slide-btn:hover {
    transform: scale(0.9);
    transition: ease-in-out 0.5s;
  }

<div id="wrapper">
    <input class="slide-btn" id="previous" type="button" value="previous"/>
    <input class="slide-btn" id="next" type="button" value="next"/>
    <div class="featured slide-item active">
      <img src="photos/bookcover/Alluredbyyou.jpg" alt="" srcset="">
      <p>ALLURED BY YOU</p>
      <span>Lorem text part 1</span>
    </div>
    <div class="featured2 slide-item">
      <img src="photos/bookcover/Notyourmarrysue.jpg" alt="" srcset="">
      <p>Rebecca Frost</p>
      <span>Lorem text part 2</span>
    </div>  
  </div>

Solution 2:^[2]

You need to maintain an id variable to so you can tell where in the slideshow you are.

So, add ids to your featured items in the form of data attributes, and then create a function that initialises an id variable to 1, and then returns a new function that adds as the actual listener.

Then based on the id you can show/hide the relevant featured sections, and also disable/enable the buttons (which are now in their own separate section) at the same time.

// Call `handleClick` which sets ups the initial id
// and then returns a new function that which will
// called whenever a button is clicked on
$(document).on('click', 'button', handleClick());

function handleClick() {

  // Initialise the id
  let id = 1;

  // Get the number of featured items from the DOM
  // We'll be using this number to compare against the id
  const items = $('.featured').length;

  // Utility function to toggle a show class for
  // featured item who has a matching data id
  function toggleFeatured(id) {
    $(`.featured[data-id=${id}]`).toggle('show');
  }

  // Disables/enables the buttons depending
  // on the id
  function updateButtons(id) {
    $('button').prop('disabled', false);
    if (id === 1) {
      $('.previous').prop('disabled', true);
    }
    if (id === items) {
      $('.next').prop('disabled', true);
    }
  }

  // This is the function that is returned
  // to the listener
  return function() {

    // It grabs the button class (previous/next)
    const cl = $(this).attr('class');

    // And depending on which it is first use
    // the utility function to toggle (remove) the
    // `show` class from the current featured item...
    toggleFeatured(id);

    // ...increase the id...
    if (cl === 'previous' && id > 1) --id;
    if (cl === 'next' && id < items) ++id;

    // ...then toggle the `show` on the item that
    // matches the new id, and update the buttons
    toggleFeatured(id);
    updateButtons(id);

  }

}

.featured { display: none; }
.show { display: block; }
.buttons { margin-bottom: 1em; }
button:hover { cursor: pointer; }

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

<div class="buttons">
  <button class="previous" type="button" disabled>Previous</button>
  <button class="next" type="button">Next</button>
</div>

<div id="wrapper">
  <div data-id="1" class="featured show">
    <img src="https://dummyimage.com/200x100/000/fff">
    <p>ALLURED BY YOU</p>
    <span>Lorem text part 1</span>
  </div>
  <div data-id="2" class="featured">
    <img src="https://dummyimage.com/200x100/cf5fcf/000000">
    <p>Rebecca Frost</p>
    <span>Lorem text part 2</span>
  </div>
  <div data-id="3" class="featured">
    <img src="https://dummyimage.com/200x100/cf815f/000000">
    <p>Bob Marley</p>
    <span>Lorem text part 3</span>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	timpa
Solution 2

'Javascript: Button onclick showing next div

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]