Using Javascript to display the next div when a button is clicked

Question

Using Javascript to display the next div when a button is clicked

My goal is to create a JavaScript functionality where clicking on a button reveals the next div, followed by subsequent ones. Essentially, it's a 'next' button with the option for a 'previous' button as well.

I've exhausted all my options and can't seem to crack the solution. Any advice or assistance would be greatly appreciated, thank you!

If anyone can offer some 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;
  }

javascript html jquery css

Answer 1

Answer №1

Here's a Vanilla JavaScript solution that handles scrolling through slide items:

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;

}

/* Other CSS rules omitted for brevity */

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

.slide-btn {
    color: #000000;
    float: right;
    font-size: 19px;
    /* Additional styling properties */
  }

<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>

Answer 2

Here's a Vanilla JavaScript solution that handles scrolling through slide items:

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;

}

/* Other CSS rules omitted for brevity */

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

.slide-btn {
    color: #000000;
    float: right;
    font-size: 19px;
    /* Additional styling properties */
  }

<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>

Answer 3

Answer №2

To keep track of your position in the slideshow, it's important to maintain an id variable.

One way to do this is by adding ids to your featured items using data attributes, and then creating a function that sets an initial id value of 1 and returns a new function to act as the listener.

With this setup, you can easily show/hide the relevant featured sections based on the id, and also enable/disable buttons (now located separately) accordingly.

// Initialize id and set up event handler for button clicks
$(document).on('click', 'button', handleClick());

function handleClick() {
  let id = 1;
  const items = $('.featured').length;

  function toggleFeatured(id) {
    $(`.featured[data-id=${id}]`).toggle('show');
  }

  function updateButtons(id) {
    $('button').prop('disabled', false);
    if (id === 1) {
      $('.previous').prop('disabled', true);
    }
    if (id === items) {
      $('.next').prop('disabled', true);
    }
  }

  return function() {
    const cl = $(this).attr('class');

    toggleFeatured(id);

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

    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>

Answer 4

To keep track of your position in the slideshow, it's important to maintain an id variable.

One way to do this is by adding ids to your featured items using data attributes, and then creating a function that sets an initial id value of 1 and returns a new function to act as the listener.

With this setup, you can easily show/hide the relevant featured sections based on the id, and also enable/disable buttons (now located separately) accordingly.

// Initialize id and set up event handler for button clicks
$(document).on('click', 'button', handleClick());

function handleClick() {
  let id = 1;
  const items = $('.featured').length;

  function toggleFeatured(id) {
    $(`.featured[data-id=${id}]`).toggle('show');
  }

  function updateButtons(id) {
    $('button').prop('disabled', false);
    if (id === 1) {
      $('.previous').prop('disabled', true);
    }
    if (id === items) {
      $('.next').prop('disabled', true);
    }
  }

  return function() {
    const cl = $(this).attr('class');

    toggleFeatured(id);

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

    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>

Using Javascript to display the next div when a button is clicked

Answer №1

Answer №2

Similar questions

Selecting a Default Option in Dropdown Menu: A Step-by-Step Guide

JavaScript Node.js is the perfect tool for organizing and arranging nested arrays. With its

Dividing an AngularJS module across multiple iFrames on a single webpage

Eliminate the keyword in the $http.get request for the JSON data

The structure of the figure tag for HTML5 validation

Ways to implement a backup plan when making multiple requests using Axios?

Issue with Camera inversion not functioning properly in THREE.js with 1 Renderer and 2 Viewports

Problem with Material UI Checkbox failing to switch states

"All my online spaces are chaotic and cluttered beyond belief, overflowing with content in high-definition

Style your Checkbox Button with the Checkbox component from Element Plus

Automatically determining the optimal quality from various sources tailored to the individual user - jwplayer

Achieving a dynamic "Picture Presentation" feature with JavaScript/jQuery

Display Page Separation with JavaScript

Modify a single parameter of an element in a Map

I am interested in consolidating multiple websites into a single HTML file

Display a dropdown menu when the value of another dropdown is changed using .NET 2.0

What is the best way to reset an event back to its original state once it has been clicked on again

What is the process for obtaining a new token in a Linnworks embedded application?

Using a restricted set of special characters in a jQuery regular expression

Exploring the power of Firebase with Vue Js lifecycle methods