Another nice jQuery feature is creation of animations. The accordion animation is a very popular way to arrange large amounts of data on a web page so that a user can quickly access what he or she needs, or to walk the user through a series of steps.
Again, there are several folders/files included here which you won't need for this particular project. You can delete them later or just ignore them
When you're prompted to do so, overwrite the existing files
If you don't have 7-Zip installed (you can easily get and install it from ninite.com), you can extract the files to a separate, temporary folder and then copy/paste them into the appropriate folders in your project
Remember, form elements have two required attributes:
method: defines how the form data will be submitted
action: defines which resource will receive the form's data, usually a script of some sort
While this looks all kinds of busy, take a few moments to familiarize yourself with it. This is the sort of thing that happens all the time in development: One person develops a piece of the puzzle (a form, maybe, or a software module, etc) and 'hands it off' to another. So the other person, that person being you in this scenario, has to first understand what the code does before using it
Relatively speaking, this is a pretty simple form. It only has one type of input - text. Well, technically, it has four: text, label, submit, and reset. But we don't have any checkboxes, radio buttons, select lists, etc. This time.
Having broken the form down into its component elements, deciphering accordions 2 & 3 should be simple, since they are configured the same way. Other things to note: this particular form is structured as a list. It doesn't have to be. But we'll see later how this structure helps us add some pizazz with our jQuery
If we zoom out a little, we can see, again, that we have a form whose fields are arranged as a list. Three of the list items have class='title' included in their opening tags
The other twelve have class='fields' in theirs. The title list items will eventually be the parts of the accordion that expand/contract when the user clicks on them. Each 'fields' list item has four input fields.
Several of the input fields are marked with an asterisk, indicating that they have to be filled out before the form can be submitted. You may remember from CSCI 1210, that HTML 5 also includes a required attribute, but by using jQuery, we can make the form more responsive
The script element at the bottom invokes a script that is similar to the one we've been using this semester to add the validation links to the bottom right of the page when it loads. Download the script and save it to your js folder
Some of the styling included in the stylesheet includes
• Removing the bullets
• Styling the title list elements
• Setting the document’s min- and max-width (adding a little responsiveness to the page)
• Centering the content on the page
• Changing the cursor pointer when the user hovers over the title elements
…but we’re still missing a lot of the functionality we want
Note that we're linking to a local copy of the jQ library. Where did it come from? Well, it's included in the project_template.zip archive. I used to think linking to external CDN-hosted libraries was the better way (and it may in fact be better), but lately, I've been bundling all of the libraries I frequently use with my projects, which makes it easier to import them into the projects
Be sure to replace 'Your Name,' etc., with the appropriate information
When we're considering maintenance, I think that tracking revision dates - at least the most recent date - is important. If we're using a repository, a lot of that meta-information is automatically tracked. But it's important to record it either way. Try to get in the habit of recording this information as part of your workflow
For purposes of this lab, the two dates will probably end up identical
So, what does this do? It selects all of the list items whose class='fields', filters out the first four, and hides the remaining 8. So when the page loads, all the user sees is the first set of form fields
The remaining code will cause each title list item to expand when the user clicks on it and hide the title list item that is currently displayed:
There's a lot going on here. We’re selecting the unordered list and, when one of the title list items is clicked, it will slide down, revealing its form fields while simultaneously (sort of) sliding the other sets of fields up (one of the 'title' fields will already be up, so nothing happens with that one), hiding them. Remember jQ's motto "write less, code more"
One thing I accidentally left off of the instructions that I discovered when doing the walkthrough: in index.html, add the following after the script element for jQuery
The code you just wrote won't work if the file isn't linked to index.html. Remember, since it is using jQuery, it has to be included after the jQuery link
So, I confess - I came up with this modification on the fly. I hope it works...
You may be wondering where all these fa- classes are coming from. They're all imported from Font Awesome via the link in the head element of the document you were provided
So, I set this up to check the state of the icons each time one of the display changes we'll add the function that does that below
The important thing to note here is that we're passing the object that was clicked ($(this)) to the function as a parameter. This lets us change the current row and both of the others
Ok -- I confess it isn't all that imaginative. But this is an example of a script (PHP) processing form input. We'll do more of this (that's a little less unimaginative) in the next few weeks
Now, you may be wondering where the script came from. Usually, scripts are stored in a separate folder (we'll see this soon). In this lab, the script file was included with your starter files (process.php). If you refer back to Fig. 5, you can verify that the path to process.php indicates that it's located in the same folder as index.html
This seems like a good point to wrap this up. We still have to implement our form validation, but I think that'll make a good homework assignment
Have a nice day 😊