Display one item at a time and allow the option to skip

Question

Display one item at a time and allow the option to skip

I am trying to display only one task at a time. When the user clicks on "skip", the next task should be shown. This could range from a list of 3 tasks to a list of 30 tasks.

So how can I display only one task at a time?

$("a#skip").click(function() {
    $('#id_task_{{i.id}}').hide('slide', { direction: 'left' }, 400);
}; 

<div id="reload">
    <div class="task" id="id_task_1">
        <a href="link to task" class="image">
            Task 1
        </a>
        <a class="skip_class" id="skip">Skip</a>
    </div>
    <div class="task" id="id_task_2">
        <a href="link to task" class="image">
            Task 2
        </a>
        <a class="skip_class" id="skip">Skip</a>
    </div>
</div>

Check out this Fiddle for a better understanding of what I'm working on. Thank you for your assistance.

jquery html css

Answer 1

Answer №1

This snippet of code demonstrates how to toggle classes in jQuery

// Applying a hide class to task divs on page load

$(".skip_class").click(function () {
    var $currTask = $(this).closest('.task');
    // Display the next task
    $currTask.nextAll('.task').first().removeClass('hide');
    // Conceal the current task
    $currTask.hide('slide', {
        direction: 'left'
    }, 400);
});

View Demo on Fiddle

Answer 2

This snippet of code demonstrates how to toggle classes in jQuery

// Applying a hide class to task divs on page load

$(".skip_class").click(function () {
    var $currTask = $(this).closest('.task');
    // Display the next task
    $currTask.nextAll('.task').first().removeClass('hide');
    // Conceal the current task
    $currTask.hide('slide', {
        direction: 'left'
    }, 400);
});

View Demo on Fiddle

Answer 3

Answer №2

To display only the first task and reveal the rest on click, you can use CSS:

.task {
   display: none;   
}
#reload .task:first-child {
   display: block;   
}

...

$("a.skip_class").click(function() {
   var task = $(this).parent();
   task.hide();
   task.next().show();
   if(task.next().attr('id') === undefined) {
     task.parent().children('.task:first').show();   
)};

http://jsfiddle.net/fAszU/1/

Also, as suggested by @Sushanth, don't forget to include the jQuery effects core plugin for the slide effect.

Answer 4

To display only the first task and reveal the rest on click, you can use CSS:

.task {
   display: none;   
}
#reload .task:first-child {
   display: block;   
}

...

$("a.skip_class").click(function() {
   var task = $(this).parent();
   task.hide();
   task.next().show();
   if(task.next().attr('id') === undefined) {
     task.parent().children('.task:first').show();   
)};

http://jsfiddle.net/fAszU/1/

Also, as suggested by @Sushanth, don't forget to include the jQuery effects core plugin for the slide effect.

Answer 5

Answer №3

Check out this live example on JSFiddle: http://jsfiddle.net/rGvna/14/

One approach could be to add a data attribute to your .task elements that specifies the corresponding page number.

<div id="reload">
    <div class="task" data-task-num="1">
        <a href="link to task" class="image">
            Task 1
        </a>
    </div>
    <div class="task" data-task-num="2">
        <a href="link to task" class="image">
            Task 2
        </a>
    </div>
    <div class="task" data-task-num="3">
        <a href="link to task" class="image">
            Task 3
        </a>
    </div>
    <div class="task" data-task-num="4">
        <a href="link to task" class="image">
            Task 4
        </a>
    </div>    
</div>
<a class="skip_class" id="skip">Skip</a>

Then, using jQuery's show() and hide() methods, you can cycle through the tasks like this:

var starting_task = 1;
var last_task  = 4;
var skip_to_task = function(task_num) {
        $('.task').hide();
        $('.task[data-task-num=' + task_num +']').show();
        if (task_num < last_task) {
            $("#skip").data('target-task', task_num + 1);    
        }
    };

skip_to_task(starting_task); // start with the first task

$("#skip").click(function(e) {
    var target_task = $(e.target).data('target-task');
    skip_to_task(target_task);
});

Answer 6

Check out this live example on JSFiddle: http://jsfiddle.net/rGvna/14/

One approach could be to add a data attribute to your .task elements that specifies the corresponding page number.

<div id="reload">
    <div class="task" data-task-num="1">
        <a href="link to task" class="image">
            Task 1
        </a>
    </div>
    <div class="task" data-task-num="2">
        <a href="link to task" class="image">
            Task 2
        </a>
    </div>
    <div class="task" data-task-num="3">
        <a href="link to task" class="image">
            Task 3
        </a>
    </div>
    <div class="task" data-task-num="4">
        <a href="link to task" class="image">
            Task 4
        </a>
    </div>    
</div>
<a class="skip_class" id="skip">Skip</a>

Then, using jQuery's show() and hide() methods, you can cycle through the tasks like this:

var starting_task = 1;
var last_task  = 4;
var skip_to_task = function(task_num) {
        $('.task').hide();
        $('.task[data-task-num=' + task_num +']').show();
        if (task_num < last_task) {
            $("#skip").data('target-task', task_num + 1);    
        }
    };

skip_to_task(starting_task); // start with the first task

$("#skip").click(function(e) {
    var target_task = $(e.target).data('target-task');
    skip_to_task(target_task);
});

Answer 7

Answer №4

Is this solution effective?

$(document).ready(function(){
    $("a.skip_class").click(function() {
        $(this).parent().hide();
        $(this).parent().next('.task').show();
    });
});

http://example.com/code-sample

Answer 8

Is this solution effective?

$(document).ready(function(){
    $("a.skip_class").click(function() {
        $(this).parent().hide();
        $(this).parent().next('.task').show();
    });
});

http://example.com/code-sample

Display one item at a time and allow the option to skip

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How can jQuery incorporate additional selection criteria for a parent element?

Tips for setting background colors as a prop for Material UI cards in React JS

How can I prevent this parsing error from happening? Implementing JSON with double quotation marks

Tips on utilizing the event.preventDefault() method within AngularJS?

Calculating cumulative sums in a MongoDB query

Using Yii2, create a button with an onclick event that executes a JsExpression

Trigger an animation function with JQuery once the first one has finished

The issue with VS Code is that it is running the wrong file instead of

blocks that adapt to different screen sizes, in addition to the

Create a Cutting-edge Navbar in Bootstrap 5.1 Featuring Three Distinct Sections: Left, Center, and Right

Exploring the potential of Oracle Openscript in combination with Javascript using AngularJS,

Personalize your hr tag

I'm having trouble obtaining accurate results for $....<...$ within the <li> tags using MathJax

SCSS - Hide div1 when div2 is hovered over

What is causing the div to expand even though css max-width is applied?

Utilizing jQuery's .fadeOut and .fadeIn for seamless transitions in webpage designs

Determine the row ID of the selected radio button

Making the text gradually disappear at the bottom of a section using a see-through overlay, while ensuring the height remains within the boundaries of the section even

Initiating an AJAX request to communicate with a Node.js server

Is it feasible to utilize VAST for delivering HLS streams? Can m3u8 files be incorporated into VAST tags for delivery?