bauna/TabAccordion.java

## TabAccordion.java
package com.romanlogic.squidjob.tapestry.pages;

import java.util.ArrayList;
import java.util.List;

import org.apache.tapestry5.annotations.Property;
import org.apache.tapestry5.annotations.SetupRender;
import org.apache.tapestry5.json.JSONObject;
import org.got5.tapestry5.jquery.utils.JQueryAccordionData;
import org.got5.tapestry5.jquery.utils.JQueryTabData;

public class TabAccordion {

	@SuppressWarnings("unused")
	@Property
    private JSONObject config = new JSONObject("{animated: false, autoHeight: false, " +
    		"icons: " +
    		"{header: 'help-arow-closed'," +
    		" headerSelected: 'help-arow-open'}}");

	@Property
	private List<JQueryAccordionData> helpBuyersList;

	@Property
	private List<JQueryAccordionData> helpProvidersList;

	@Property
	private List<JQueryAccordionData> faqBuyersList;

	@Property
	private List<JQueryAccordionData> faqProvidersList;

    @Property
    private List<JQueryTabData> listTabData;

	@SetupRender
	void onSetupRender()
	{
        listTabData = new ArrayList<JQueryTabData>();
        listTabData.add(new JQueryTabData("Help", "help"));
        listTabData.add(new JQueryTabData("FAQ", "faq"));

        helpBuyersList = new ArrayList<JQueryAccordionData>();
		helpBuyersList.add(new JQueryAccordionData("Getting Started", "help1"));
		helpBuyersList.add(new JQueryAccordionData("Requesting a Service", "help2"));

		helpProvidersList = new ArrayList<JQueryAccordionData>();
		helpProvidersList.add(new JQueryAccordionData("Getting Started", "help6"));
		helpProvidersList.add(new JQueryAccordionData("Hiring an Account Manager", "help7"));

		faqBuyersList = new ArrayList<JQueryAccordionData>();
		faqBuyersList.add(new JQueryAccordionData("Is Squidjob in my area?", "faq1"));
		faqBuyersList.add(new JQueryAccordionData("Why does Squidjob require my cell phone number?", "faq2"));

		faqProvidersList = new ArrayList<JQueryAccordionData>();
		faqProvidersList.add(new JQueryAccordionData("Is Squidjob in my area?", "faq19"));
		faqProvidersList.add(new JQueryAccordionData("How much does Squidjob cost?", "faq20"));
	}
}

## TabAccordion.tml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en-US"
    xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd"
	xmlns:j="tapestry-library:jquery">

    <head>
        <title>test Tab with Accordion</title>
    </head>
    <body>

    <div class="help helpPanelTabs">
	    <j:tabs t:listTabData="prop:listTabData" t:activePanelId="0" />
    </div>
  	<t:block id="help">
      	<h1>Buyers</h1>
      	<j:accordion t:listOfElements="prop:helpBuyersList" t:activeElementId="0" params="config" />

		<h1>Providers</h1>
		<j:accordion t:listOfElements="prop:helpProvidersList" t:activeElementId="0" params="config" />
	</t:block>

	<t:block id="faq">
		<h1>Buyers</h1>
	    <j:accordion t:listOfElements="prop:faqBuyersList" t:activeElementId="0" params="config" />

		<h1>Providers</h1>
		<j:accordion t:listOfElements="prop:faqProvidersList" t:activeElementId="0" params="config" />
    </t:block>

    <t:block id="help1">
        <div class="help-itemcontent">
            <div class="enumerated">Creating a Profile</div>
            <div class="margined">To get started on Squidjob simply create your buyer profile by clicking on either the âStart Nowâ button on the homepage or the âRegisterâ tab at the top-right corner of the screen. After submitting some initial information, you will receive an e-mail containing a link to the profile creation page where you'll tell us a little more about yourself. All of the information you provide to Squidjob - except for a rough indication of your location- is withheld from providers until you make a selection. Only the winning provider receives your contact information.</div>
            <div class="enumerated">Cell Phone Verification</div>
            <div class="margined">In order to ensure a Squidjob community composed of credible, well-intentioned users, we use a cell phone verification process to guarantee the authenticity of each account. After entering your cell phone number in the user profile, you will receive a code via SMS text along with a message prompting you to confirm your account.</div>
        </div>
    </t:block>

    <t:block id="help2">
        <div class="help-itemcontent">
            <div class="enumerated">Post a Job</div>
            <div class="margined">To request a service you can either select the "Start Now" button on the homepage or the "Post a Job" button on your buyer Dashboard. Both of these options will take you to the "Post a Job Request" screen. Just complete this form, attach some pictures if you'd like, and you're done!</div>
            <div class="enumerated">View Sample</div>
        </div>
    </t:block>

    <t:block id="help6">
        <div class="help-itemcontent">
            <div class="enumerated">Creating a Profile</div>
            <div class="margined">To get started on Squidjob, simply create your provider profile by clicking on either the âStart Nowâ button under the âProviderâ tab on the homepage or the on âRegisterâ link at the top-right corner of the screen. After submitting some initial information, you will receive an e-mail containing a link to the profile creation page where you'll tell us a little more about yourself or your business. Your profile information will be available to individual buyers when you place estimates on their jobs.</div>
        </div>
    </t:block>

    <t:block id="help7">
        <div class="help-itemcontent">
            <div class="margined">At Squidjob we offer all providers the option of hiring an Account Manager. Squidjob recognizes that some service professionals prefer to work without the distraction of the Internet and we have designed this position to meet these professionals' needs. Subscribing to the Account Manager allows you to access Squidjob's consumer base without having to use a computer. This means that we'll take care of all the computer stuff for you and simply give you a call whenever we have a relevant lead. Just tell us how to repond and we'll let you know if you've won the job.</div>
        </div>
    </t:block>

    <t:block id="faq1">
        <div class="help-itemcontent">Squidjob is currently restricted to the New York metropolitan area. We fully intend on expanding our service to the rest of this beautiful country, but it takes time for a website like ours to grow. Our current geographic restriction means that buyers outside of the New York metro area may not receive estimates for their posted jobs. Likewise, service providers in other parts of the country may not see much buyer activity in their region. If this applies to you, we apologize for the inconvenience. Nobody is more anxious than us to spread Squidjob from sea to shining sea.<br /><br />If you would like to see us serving your area sooner rather than later, tell your friends and neighbors about Squidjob. We tend to devote our resources to areas where we see existing interest.</div>
    </t:block>

    <t:block id="faq2">
        <div class="help-itemcontent">Squidjob intends to create a local services marketplace of the highest standard and we want to make sure that our users take the community seriously. By prompting users to include their cell phone number, we hope to attract buyers who are genuinely interested in booking providers through Squidjob. This feature also keeps user accounts limited per person, meaning that a buyer who has developed a negative reputation on our site will find it very difficult to create a new account. Your cell phone number will NEVER be sold or distributed. We will NEVER use it to contact you under any circumstance after the initial verification text and you will NEVER receive any unsolicited calls or text messages from Squidjob related businesses. We hope this answers any questions you may have.</div>
    </t:block>
    <t:block id="faq19">
        <div class="help-itemcontent">Squidjob is currently restricted to the New York metropolitan area. We fully intend on expanding our service to the rest of this beautiful country, but it takes time for a website like ours to grow. Our current geographic restriction means that buyers outside of the New York metro area may not receive estimates for their posted jobs. Likewise, service providers in other parts of the country may not see much buyer activity in their area. If this applies to you, we apologize for the inconvenience. Nobody is more anxious than us to spread Squidjob from sea to shining sea.<br /><br />If you would like to see us serving your area sooner rather than later, tell your friends and neighbors about Squidjob. We tend to devote our resources to areas where we see existing interest.</div>
    </t:block>

    <t:block id="faq20">
        <div class="help-itemcontent">Providers, we are very grateful for your interest in Squidjob and can't help but offer you the services of our website for free. If you you'd like to reserve one of our personal Account Managers, however, we charge a reasonable monthly fee for this service.</div>
    </t:block>
    </body>
</html>
	package com.romanlogic.squidjob.tapestry.pages;

	import java.util.ArrayList;
	import java.util.List;

	import org.apache.tapestry5.annotations.Property;
	import org.apache.tapestry5.annotations.SetupRender;
	import org.apache.tapestry5.json.JSONObject;
	import org.got5.tapestry5.jquery.utils.JQueryAccordionData;
	import org.got5.tapestry5.jquery.utils.JQueryTabData;

	public class TabAccordion {

	@SuppressWarnings("unused")
	@Property
	private JSONObject config = new JSONObject("{animated: false, autoHeight: false, " +
	"icons: " +
	"{header: 'help-arow-closed'," +
	" headerSelected: 'help-arow-open'}}");

	@Property
	private List<JQueryAccordionData> helpBuyersList;

	@Property
	private List<JQueryAccordionData> helpProvidersList;

	@Property
	private List<JQueryAccordionData> faqBuyersList;

	@Property
	private List<JQueryAccordionData> faqProvidersList;

	@Property
	private List<JQueryTabData> listTabData;

	@SetupRender
	void onSetupRender()
	{
	listTabData = new ArrayList<JQueryTabData>();
	listTabData.add(new JQueryTabData("Help", "help"));
	listTabData.add(new JQueryTabData("FAQ", "faq"));

	helpBuyersList = new ArrayList<JQueryAccordionData>();
	helpBuyersList.add(new JQueryAccordionData("Getting Started", "help1"));
	helpBuyersList.add(new JQueryAccordionData("Requesting a Service", "help2"));

	helpProvidersList = new ArrayList<JQueryAccordionData>();
	helpProvidersList.add(new JQueryAccordionData("Getting Started", "help6"));
	helpProvidersList.add(new JQueryAccordionData("Hiring an Account Manager", "help7"));

	faqBuyersList = new ArrayList<JQueryAccordionData>();
	faqBuyersList.add(new JQueryAccordionData("Is Squidjob in my area?", "faq1"));
	faqBuyersList.add(new JQueryAccordionData("Why does Squidjob require my cell phone number?", "faq2"));

	faqProvidersList = new ArrayList<JQueryAccordionData>();
	faqProvidersList.add(new JQueryAccordionData("Is Squidjob in my area?", "faq19"));
	faqProvidersList.add(new JQueryAccordionData("How much does Squidjob cost?", "faq20"));
	}
	}
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xml:lang="en-US"
	xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd"
	xmlns:j="tapestry-library:jquery">

	<head>
	<title>test Tab with Accordion</title>
	</head>
	<body>

	<div class="help helpPanelTabs">
	<j:tabs t:listTabData="prop:listTabData" t:activePanelId="0" />
	</div>
	<t:block id="help">
	<h1>Buyers</h1>
	<j:accordion t:listOfElements="prop:helpBuyersList" t:activeElementId="0" params="config" />

	<h1>Providers</h1>
	<j:accordion t:listOfElements="prop:helpProvidersList" t:activeElementId="0" params="config" />
	</t:block>

	<t:block id="faq">
	<h1>Buyers</h1>
	<j:accordion t:listOfElements="prop:faqBuyersList" t:activeElementId="0" params="config" />

	<h1>Providers</h1>
	<j:accordion t:listOfElements="prop:faqProvidersList" t:activeElementId="0" params="config" />
	</t:block>

	<t:block id="help1">
	<div class="help-itemcontent">
	<div class="enumerated">Creating a Profile</div>
	<div class="margined">To get started on Squidjob simply create your buyer profile by clicking on either the âStart Nowâ button on the homepage or the âRegisterâ tab at the top-right corner of the screen. After submitting some initial information, you will receive an e-mail containing a link to the profile creation page where you'll tell us a little more about yourself. All of the information you provide to Squidjob - except for a rough indication of your location- is withheld from providers until you make a selection. Only the winning provider receives your contact information.</div>
	<div class="enumerated">Cell Phone Verification</div>
	<div class="margined">In order to ensure a Squidjob community composed of credible, well-intentioned users, we use a cell phone verification process to guarantee the authenticity of each account. After entering your cell phone number in the user profile, you will receive a code via SMS text along with a message prompting you to confirm your account.</div>
	</div>
	</t:block>

	<t:block id="help2">
	<div class="help-itemcontent">
	<div class="enumerated">Post a Job</div>
	<div class="margined">To request a service you can either select the "Start Now" button on the homepage or the "Post a Job" button on your buyer Dashboard. Both of these options will take you to the "Post a Job Request" screen. Just complete this form, attach some pictures if you'd like, and you're done!</div>
	<div class="enumerated">View Sample</div>
	</div>
	</t:block>

	<t:block id="help6">
	<div class="help-itemcontent">
	<div class="enumerated">Creating a Profile</div>
	<div class="margined">To get started on Squidjob, simply create your provider profile by clicking on either the âStart Nowâ button under the âProviderâ tab on the homepage or the on âRegisterâ link at the top-right corner of the screen. After submitting some initial information, you will receive an e-mail containing a link to the profile creation page where you'll tell us a little more about yourself or your business. Your profile information will be available to individual buyers when you place estimates on their jobs.</div>
	</div>
	</t:block>

	<t:block id="help7">
	<div class="help-itemcontent">
	<div class="margined">At Squidjob we offer all providers the option of hiring an Account Manager. Squidjob recognizes that some service professionals prefer to work without the distraction of the Internet and we have designed this position to meet these professionals' needs. Subscribing to the Account Manager allows you to access Squidjob's consumer base without having to use a computer. This means that we'll take care of all the computer stuff for you and simply give you a call whenever we have a relevant lead. Just tell us how to repond and we'll let you know if you've won the job.</div>
	</div>
	</t:block>

	<t:block id="faq1">
	<div class="help-itemcontent">Squidjob is currently restricted to the New York metropolitan area. We fully intend on expanding our service to the rest of this beautiful country, but it takes time for a website like ours to grow. Our current geographic restriction means that buyers outside of the New York metro area may not receive estimates for their posted jobs. Likewise, service providers in other parts of the country may not see much buyer activity in their region. If this applies to you, we apologize for the inconvenience. Nobody is more anxious than us to spread Squidjob from sea to shining sea.<br /><br />If you would like to see us serving your area sooner rather than later, tell your friends and neighbors about Squidjob. We tend to devote our resources to areas where we see existing interest.</div>
	</t:block>

	<t:block id="faq2">
	<div class="help-itemcontent">Squidjob intends to create a local services marketplace of the highest standard and we want to make sure that our users take the community seriously. By prompting users to include their cell phone number, we hope to attract buyers who are genuinely interested in booking providers through Squidjob. This feature also keeps user accounts limited per person, meaning that a buyer who has developed a negative reputation on our site will find it very difficult to create a new account. Your cell phone number will NEVER be sold or distributed. We will NEVER use it to contact you under any circumstance after the initial verification text and you will NEVER receive any unsolicited calls or text messages from Squidjob related businesses. We hope this answers any questions you may have.</div>
	</t:block>
	<t:block id="faq19">
	<div class="help-itemcontent">Squidjob is currently restricted to the New York metropolitan area. We fully intend on expanding our service to the rest of this beautiful country, but it takes time for a website like ours to grow. Our current geographic restriction means that buyers outside of the New York metro area may not receive estimates for their posted jobs. Likewise, service providers in other parts of the country may not see much buyer activity in their area. If this applies to you, we apologize for the inconvenience. Nobody is more anxious than us to spread Squidjob from sea to shining sea.<br /><br />If you would like to see us serving your area sooner rather than later, tell your friends and neighbors about Squidjob. We tend to devote our resources to areas where we see existing interest.</div>
	</t:block>

	<t:block id="faq20">
	<div class="help-itemcontent">Providers, we are very grateful for your interest in Squidjob and can't help but offer you the services of our website for free. If you you'd like to reserve one of our personal Account Managers, however, we charge a reasonable monthly fee for this service.</div>
	</t:block>
	</body>
	</html>