I am trying to implement pagination for several of my forms, and can't get any of the sections to hide. When I click any of the navigation bar items or buttons, absolutely nothing at all happens. I have checked the script in the browser console and am not receiving any errors.
If anyone can help me understand what I am doing wrong, I would really appreciate it. I have even gone as far as to create a very simple new form to make sure that none of my field rules or collections were causing the issue, but to no avail.
The simple form has three sections, Personal Information, Destination and Expenses. CSS Classes set in the Advanced tab for these sections are as follows:
Personal Information: sections info section1
Destination: sections dest section2
Expenses: sections exps section3
Here is the CSS for my simple form:
.navbar { text-align: center; }
.navbar div { cursor: pointer;
display: inline-block;
background-color: #e5e5e5;
padding: 5px 5px; }
.navbar div:hover { background-color: #c0c0c0;}
.navbar .selected { background-color: #c0c0c0;}
And here is the javascript:
//pagination //when a navigation item is clicked, hide all sections and the submit button $('.navitem').on('touchstart click', function () { $('.sections, .Submit').hide(); //also looks through the navigation tabs and removes the selected class $('.navbar').find('.navitem').removeClass('selected'); //then looks at the navigation item that was clicked, and shows or hides the other sections //based on the navigation item's class and adds the 'selected' class to the appropriate tab if ($(this).hasClass('info')) { $('.section1').show(); $('.navbar').find('.info').addClass('selected'); } else if ($(this).hasClass('dest')) { $('.section2').show(); $('.navbar').find('.dest').addClass('selected'); } else if ($(this).hasClass('exps')) { $('.section3').show(); $('.navbar').find('.exps').addClass('selected'); } }) $('.navitem.info').trigger('click'); //end pagination
The navigation bar items appear clickable, as do the buttons; however, nothing happens when they are clicked. The entire form displays on form load, and stays the same no matter what I click.
I feel like this is probably something simple, but have searched this site for similar issues and been unable to find anything that tells me where I've gone awry. I've wrestled with it way too long, and need some help in order to be able to implement pagination.
Thank you!!