showcasing a set of div elements by using forward and backward buttons

Question

showcasing a set of div elements by using forward and backward buttons

I am dealing with 5 divs that have text content inside.

To navigate through each div, I have implemented a back and next button system.

<a href="" class="back-btn off">Back</a> | <a href="" class="next-btn">Next</a>

<div class="vote-result first">
  This is an example text
</div>

<div class="vote-result">
  Here is some more text
</div>

<div class="vote-result">
  More text to read
</div>

<div class="vote-result">
  This is the final section of text
</div>

// Hiding all divs except for the first one initially.

.vote-result { display: none; }
.vote-result.first { display: block; }

On the first click of the next button, I want to remove the 'off' class to make it clickable. Initially, the link should be disabled and later re-enabled.

$(".back-btn").removeClass("off");

When the last div is reached, I need to add the 'off' class to the next-btn to disable it.

Although I considered using a carousel JavaScript plugin for this functionality, I feel it's unnecessary at the moment.

I have thought about a solution involving sub-classes for the links based on which button was clicked (back or next), to determine which div should be displayed next and manage the state of the buttons accordingly.

I would like to find a way to incorporate additional divs without having to modify the existing code. Any suggestions are welcome, thank you.

javascript jquery html css

Answer 1

Answer №1

Here is a solution tailored just for you. Feel free to check out the Fiddle I created based on your requirements.

Below are snippets of code:

<a class="back-btn off">Back</a> | <a class="next-btn">Next</a>

<div class="vote-result first selectedDiv">
  this is an example snippet
</div>

<div class="vote-result">
  more content here
</div>

<div class="vote-result">
  additional copy goes here
</div>

<div class="vote-result last">
  this marks the final section
</div>

For JS/jQuery functionality, refer to the following code:

$(".back-btn").click(function(){debugger;
    var prevElement=$('.selectedDiv').prev();
    prevElement.show();
    $(".selectedDiv").hide();                         
    $(".selectedDiv").removeClass("selectedDiv");
    prevElement.addClass("selectedDiv");                            

   if($('.first').css('display')=="block"){
       $(".back-btn").addClass("off");
   }
   else{
    $(".next-btn").removeClass("off");  
   }
});

$(".next-btn").click(function(){debugger;
    var nextElement= $('.selectedDiv').next();
    nextElement.show();
    $(".selectedDiv").hide();                         
    $(".selectedDiv").removeClass("selectedDiv");
    nextElement.addClass("selectedDiv");
    if($('.last').css('display')=="block"){
      $(".next-btn").addClass("off");
   }
   else{
     $(".back-btn").removeClass("off");  
   }
});

The CSS code snippet is as follows:

.vote-result { display: none; }
.vote-result.first { display: block; }
.off{display:none;}

Answer 2

Here is a solution tailored just for you. Feel free to check out the Fiddle I created based on your requirements.

Below are snippets of code:

<a class="back-btn off">Back</a> | <a class="next-btn">Next</a>

<div class="vote-result first selectedDiv">
  this is an example snippet
</div>

<div class="vote-result">
  more content here
</div>

<div class="vote-result">
  additional copy goes here
</div>

<div class="vote-result last">
  this marks the final section
</div>

For JS/jQuery functionality, refer to the following code:

$(".back-btn").click(function(){debugger;
    var prevElement=$('.selectedDiv').prev();
    prevElement.show();
    $(".selectedDiv").hide();                         
    $(".selectedDiv").removeClass("selectedDiv");
    prevElement.addClass("selectedDiv");                            

   if($('.first').css('display')=="block"){
       $(".back-btn").addClass("off");
   }
   else{
    $(".next-btn").removeClass("off");  
   }
});

$(".next-btn").click(function(){debugger;
    var nextElement= $('.selectedDiv').next();
    nextElement.show();
    $(".selectedDiv").hide();                         
    $(".selectedDiv").removeClass("selectedDiv");
    nextElement.addClass("selectedDiv");
    if($('.last').css('display')=="block"){
      $(".next-btn").addClass("off");
   }
   else{
     $(".back-btn").removeClass("off");  
   }
});

The CSS code snippet is as follows:

.vote-result { display: none; }
.vote-result.first { display: block; }
.off{display:none;}

Answer 3

Answer №2

Your New HTML Code:

<html>
    <head>
        <style>
            .vote-result { display: none; }
            .vote-result.first { display: block; }
            .off {
                color: Red;
            }
            a {
                color: blue;
            }
        </style>
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="code.js"></script>
    </head>
    <body>
        <a href="" class="back-btn off">Back</a> | <a href="" class="next-btn">Next</a>

        <div class="vote-result first">
          This is an example of text
        </div>

        <div class="vote-result">
          This is some additional text content
        </div>

        <div class="vote-result">
          More text content goes here
        </div>

        <div class="vote-result">
          This is the final div block
        </div>
    </body>
</html>

Update to your "code.js" file in the same directory:

/**
 * The current index (starting from zero) of the displayed <div class="vote-result"> element
 * @var {Number}
 */
var activeIndex = 0;

function getNumberOfItems() {
    return $('.vote-result').length;
}

function synchronizeInterface() {
    var numberOfItems = getNumberOfItems(),
        lastIndex = numberOfItems - 1;

    $('.vote-result').removeClass('first');
    $('.vote-result').each(function(index) {
        if (index == activeIndex) {
            $(this).addClass('first');
        }
    })

    $('.back-btn').toggleClass('off', activeIndex == 0);
    $('.next-btn').toggleClass('off', activeIndex == lastIndex);
}

$(function() {
    $('.back-btn,.next-btn').on('click', function() {
        // Check if the clicked button is enabled
        if (!$(this).hasClass('off')) {
            // Determine if "Next" or "Back" button was clicked
            var clickedNext = $(this).hasClass('next-btn');

            // Update the active index based on button clicked
            activeIndex = clickedNext
                ? Math.min(activeIndex + 1, getNumberOfItems() - 1)
                : activeIndex = Math.max(0, activeIndex - 1);

            // Update the interface with new variables
            synchronizeInterface();
        }

        return false;
    });
});

Note: There was an issue with a missing double-quote in one of your class attributes in HTML code. Additionally, I added more styling and suggested renaming ".first" class to ".active".

Answer 4

Your New HTML Code:

<html>
    <head>
        <style>
            .vote-result { display: none; }
            .vote-result.first { display: block; }
            .off {
                color: Red;
            }
            a {
                color: blue;
            }
        </style>
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="code.js"></script>
    </head>
    <body>
        <a href="" class="back-btn off">Back</a> | <a href="" class="next-btn">Next</a>

        <div class="vote-result first">
          This is an example of text
        </div>

        <div class="vote-result">
          This is some additional text content
        </div>

        <div class="vote-result">
          More text content goes here
        </div>

        <div class="vote-result">
          This is the final div block
        </div>
    </body>
</html>

Update to your "code.js" file in the same directory:

/**
 * The current index (starting from zero) of the displayed <div class="vote-result"> element
 * @var {Number}
 */
var activeIndex = 0;

function getNumberOfItems() {
    return $('.vote-result').length;
}

function synchronizeInterface() {
    var numberOfItems = getNumberOfItems(),
        lastIndex = numberOfItems - 1;

    $('.vote-result').removeClass('first');
    $('.vote-result').each(function(index) {
        if (index == activeIndex) {
            $(this).addClass('first');
        }
    })

    $('.back-btn').toggleClass('off', activeIndex == 0);
    $('.next-btn').toggleClass('off', activeIndex == lastIndex);
}

$(function() {
    $('.back-btn,.next-btn').on('click', function() {
        // Check if the clicked button is enabled
        if (!$(this).hasClass('off')) {
            // Determine if "Next" or "Back" button was clicked
            var clickedNext = $(this).hasClass('next-btn');

            // Update the active index based on button clicked
            activeIndex = clickedNext
                ? Math.min(activeIndex + 1, getNumberOfItems() - 1)
                : activeIndex = Math.max(0, activeIndex - 1);

            // Update the interface with new variables
            synchronizeInterface();
        }

        return false;
    });
});

Note: There was an issue with a missing double-quote in one of your class attributes in HTML code. Additionally, I added more styling and suggested renaming ".first" class to ".active".

Answer 5

Answer №3

Explore the capabilities of jQuery's .next() method for easy navigation - jQuery - Next(). You can also use this simple check to determine if an element is the last one in a sequence.

if($(this).is(':last-child'))
{
    $('.next-btn').removeClass('off');
}else{
    $('.next-btn').addClass('off');
}

Make sure to apply this logic whenever a navigation button is clicked, including handling the first button accordingly.

Answer 6

Explore the capabilities of jQuery's .next() method for easy navigation - jQuery - Next(). You can also use this simple check to determine if an element is the last one in a sequence.

if($(this).is(':last-child'))
{
    $('.next-btn').removeClass('off');
}else{
    $('.next-btn').addClass('off');
}

Make sure to apply this logic whenever a navigation button is clicked, including handling the first button accordingly.

showcasing a set of div elements by using forward and backward buttons

Answer №1

Answer №2

Answer №3

Similar questions

extracting URL parameters using AJAX

In my opinion, CSS3 transform translateZ can be likened to scaling in some way

The infinite scroll feature on Next.js resulted in duplicating the last element during the initial fetch process

Connect an existing function to JQuery animation

Encountering an issue with react-dom that needs to be resolved

Instruct Smarty to display the block exactly as it is

In what way can you set the sequence of properties in a JavaScript object for a MongoDB index while using node.js?

What is the best way to implement callback functionality within a UI dialog?

A guide to customizing the label color in Material-UI's <TextField/> component

Cropping and resizing images

The property linerGradiant of r cannot be destructured because it is not defined

Exploring Techniques for Streamlining HTML/CSS Editing in Browser

Position icons and images on the right side, and the textarea on the left side of the page (using Twitter

Include money symbols within input fields with padding and vertical alignment

Can pure Javascript be used to integrate Bootstrap pagination into a Bootstrap table?

Instructions for sorting an array of objects by Firebase Timestamp

What is the best way to utilize scope apply or run functions upon successful completion in Angular 8 jQuery ajax requests?

Encountering a timeout error when connecting to MongoDB

Transforming form command objects in Spring MVC using JavaScript or AJAX execution

Hide the Bootstrap slide menu with jQuery by clicking anywhere on the screen