Currently, I am in the process of working on my step by step order and I want to express my gratitude for all the assistance I have received so far. Despite the help, I still have some unanswered questions!
The steps in my project are categorized into different <section>, and I would like to assign a class="multiple" to one specific <section> so that multiple selections can be made within it. The use of .selected helps me determine whether an <li> has been selected or not.
This is the code I am currently working with:
$('li').on('click', function(e) {
e.preventDefault();
// remove selected class from links after the current one
$(this).closest('section').nextAll('section').find('li').removeClass('selected');
// remove selected from siblings, toggle current selected class
$(this).siblings('li').removeClass('selected').end().toggleClass('selected');
var $target = $('#' + $(this).attr('data-id'));
if ($target.length) {
// hide any steps after the current one that may be shown
$(this).closest('section').nextAll('section').find('.step').not($target).removeClass('active');
// toggle display of selected step
$target.toggleClass('active', $(this).hasClass('selected'));
} else {
console.log('do something else to end this thing');
}
})
Hence, my query involves exploring possibilities within my code to enable the <section class="multiple"> functionality, which allows for multiple items to be selected.
I have shared my JSFiddle here. Feel free to click on the items to view the last step, specifically focusing on the section that permits multiple selections.
I appreciate your support in advance. Thank you!