Panel Functionality and Data Display

The panel object uses the prototype structure to keep it reusable, which essentially allows us to create multiple panel objects. An accordion panel needs a unique ID for reference purposes and can include a title, which is displayed in a panel header, and content that is exposed when a user expands the panel. The id, title, and content values will become properties of the panel object and will be visually represented in the accordion. These properties will be accessible during runtime and contained within the panels that created them. In order to create these properties, we will use the values we passed to the new panel objects while iterating through them in the accordion display method. Listing 10.8 shows how these values were passed to the panel object's constructor function and are scoped to the panel.

Listing 10.8. The Panel Object Properties and Constructor (Panel.js)

function Panel(id, title, content) {     this.id = id;     this.title = title;     this.content = content; }

The constructor function is used to instantiate the panel and set the property values of the object. After the panel is instantiated, it can be used to call other methods within itself. In the Accordion object, the first method we called was the display method. This method creates the div elements that are used to display the data that is passed to the object. To create the elements that are necessary to render a panel, we will need to use some of the utility methods that we created in the Utilities object in Chapter 10. In order to create the display, we will need to create the following elements: panel, header, title, and content. The panel element is simply a container for the other elements, whereas the header element contains the title element and has an onclick event that will expand and collapse individual panels. The final two elements are title and content. They both have an innerHTML property that is set to the relative properties that were set in the constructor. After we have created all the necessary elements, we need to append them to the panel element. When we complete the display method, we return the panel element and append it to the document body in the Accordion object. Listing 10.9 shows the entire code for creating the elements, appending them, and returning the panel.

Listing 10.9. The Panel's Display Method (Panel.js)

Panel.prototype.display = function() {     var panel = Utilities.createElement("div");     var header = Utilities.createElement("div", {         className: 'header',         onclick: this.toggle(this.id)         });     var title = Utilities.createElement("div", {         className: 'title',         innerHTML: this.title         });     var content = Utilities.createElement("div", {         id: 'content_'+ this.id,         className: 'content',         innerHTML: this.content         });     Utilities.appendChild(panel, Utilities.appendChild(header, title), content);     return panel; }

As you probably remember when we created the Accordion object, the panels display method is called from the accordion's display method as a parameter of the appendChild call, along with the parent accordion element. This is how the panels are added to the accordion and then the accordion was added to the document body.

The toggle method in Listing 10.10 is used in the header div as an onclick event. This method is interesting because it returns another method. The method that is returned is triggered during an onclick event and ultimately calls the accordion's toggle method. The header is also passing the panel ID when the code is executed to be used as a parameter in the accordion's toggle method. This is the ID that is used to decipher which panel should be expanded and which panels should be collapsed.

Listing 10.10. Toggling the Panel State (Panel.js)

Panel.prototype.toggle = function(id) {     return function()     {         Accordion.toggle(id);     } }

The collapse and expand methods in Listing 10.11 simply hide and reveal the content divs in the panels. They both use the Utilities getElement method, which gets the content element by name in the document. The collapse method sets the display style to none to hide it, whereas the expand method sets the display style to an empty string to reveal the content's data.

Listing 10.11. The Panel's Collapse and Expand Methods (Panel.js)

Panel.prototype.collapse = function() {     Utilities.getElement('content_'+ this.id).style.display = 'none'; } Panel.prototype.expand = function() {     Utilities.getElement('content_'+ this.id).style.display = ''; }

Creating the CSS

The CSS file for the accordion contains the styles for each of the elements within the accordion. As Listing 10.12 shows, the accordion element sets the font-family, font-size, width, and border attributes. These styles are inherited by each of the panels because they are encapsulated within the accordion element.

Listing 10.12. The Accordion's Styles (accordion.css)

#accordion {     font-family: Arial, Helvetica, sans-serif;     font-size: 12px;     width: 600px;     border: #ccc 1px solid; }

The header holds the title for each panel, and has a style shown in Listing 10.13 that contains a border-bottom attribute, which matches the border that surrounds the panels to make it look more incorporated into the accordion. It also has a background-color, a width to set the size of the clickable area, and a pointer cursor to show users that they can click the headers to toggle their state.

Listing 10.13. The Accordion Header Style (accordion.css)

.header {     border-bottom: #ccc 1px solid;     background-color: #eaeaea;     width: 600px;     cursor: pointer; }

The title class in Listing 10.14 simply bolds the font with the font-weight, changes the color of the font, and adds a little padding to keep the title away from the edges of the header that contains it.

Listing 10.14. The Accordion Title Style (accordion.css)

.title {     font-weight: bold;     color: #333;     padding: 5px; }

The class for the panel content simply sets the padding to keep the content away from the edges of the panels, as seen in Listing 10.15.

Listing 10.15. The Accordion Content Style (accordion.css)

.content {     padding: 10px; }

All these styles are easily editable and can be modified to completely change the look of the accordion. It is now up to you to make it your own, or brand it for any project you would like to incorporate it with.

The completed accordion component will look very similar to Figure 10.1, aside from any content differences or additional panels you may add to the XML. This chapter's sample includes an example of how you can display an email thread in the accordion, which we will incorporate into an internal web mail application for the sample that we create in Part V, when we learn how to combine a database with Ajax.

Figure 10.1. The completed accordion component is just one example of the many purposes they can serve in a web application.