CODEWITHSUNDEEP
jqueryhtmlcss
Modelesq
Modelesq

Reputation: 5402

Only show item one at a time with skip

What I'm trying to do is, only show one task at a time..If the user clicks on skip, show the next one... It could be a list of 3 tasks to a list of 30 tasks.

So how do show one 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>

Fiddle here to get an idea with what I'm working with. Thank you for your help.

Upvotes: 1

Views: 217

Answers (4)

pinkpixycoder
pinkpixycoder

Reputation: 89

Does this help?

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

http://jsfiddle.net/rGvna/17/

Upvotes: 0

rgoraya
rgoraya

Reputation: 241

A working fiddle here: http://jsfiddle.net/rGvna/14/

I would suggest using a data attribute on your .task elements that contains 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>

And then use jQuery show(), hide() methods to cycle through the tasks as follow:

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); // go to first task by default

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

Upvotes: 0

MiRaIT
MiRaIT

Reputation: 149

You can hide all but the first task with css and show em on click:

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

And as @Sushanth mentioned you need the jQuery effects core plugin for the slide effect.

Upvotes: 0

Sushanth --
Sushanth --

Reputation: 55750

You can try something like this

// Add a class called hide to all the div with class task to hide it on page load

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

Check Fiddle

Upvotes: 1

Related Questions