My goal is to create a step-by-step ordering system using the data-id="x" attribute to determine which content should be visible when selected.
I want to make sure that if two elements have the same data-id, clicking on one will deselect the other. Any suggestions on how to achieve this?
Here's my current code:
$('li').on('click',function(e) {
e.preventDefault();
$(this).closest('section').nextAll('section').find('li').removeClass('selected');
$(this).siblings('li').removeClass('selected').end().toggleClass('selected');
var $target = $('#'+$(this).attr('data-id'));
if ($target.length) {
$(this).closest('section').nextAll('section').find('.step').not($target).removeClass('active');
$target.toggleClass('active');
} else {
console.log('do something else to end this thing');
}
})
Here is a link to my JSFiddle with examples and the above code.
Can anyone provide an example of how this code will work along with a brief explanation? Thank you.