This is what i have tried so far: <----------HomePage class-----------> package com.proj.wicket.ui;
import java.util.ArrayList; import java.util.List; import org.apache.wicket.Component; import org.apache.wicket.ajax.AjaxEventBehavior; import org.apache.wicket.ajax.AjaxRequestTarget; import org.apache.wicket.ajax.attributes.AjaxRequestAttributes; import org.apache.wicket.ajax.attributes.AjaxRequestAttributes.EventPropagation; import org.apache.wicket.behavior.AttributeAppender; import org.apache.wicket.markup.head.IHeaderResponse; import org.apache.wicket.markup.head.JavaScriptHeaderItem; import org.apache.wicket.markup.head.PriorityHeaderItem; import org.apache.wicket.markup.html.WebMarkupContainer; import org.apache.wicket.markup.html.WebPage; import org.apache.wicket.markup.html.basic.Label; import org.apache.wicket.markup.html.form.Radio; import org.apache.wicket.markup.html.form.RadioGroup; import org.apache.wicket.markup.html.list.ListItem; import org.apache.wicket.markup.html.list.ListView; import org.apache.wicket.model.Model; @SuppressWarnings("unused") public class HomePage extends WebPage { public HomePage() { final WebMarkupContainer mainContainer = new WebMarkupContainer("mainContainer"); final WebMarkupContainer accordionContainer = new WebMarkupContainer("accordion"); final List<ServiceView> persons = new ArrayList<ServiceView>(); ServiceView view1 = new ServiceView(); ServiceView view2 = new ServiceView(); ServiceView view3 = new ServiceView(); ServiceView view4 = new ServiceView(); ServiceView view5 = new ServiceView(); ServiceView view6 = new ServiceView(); ServiceView view7 = new ServiceView(); view1.setName("David,ngog 2013"); view1.setDate("31-1-2015"); view1.setDesc("This is a Demo Desc!!!"); view1.setCode("6KH9K"); view1.setStatus("Active"); view2.setName("David,ngog 2014"); view2.setDate("31-1-2015"); view2.setDesc("This is a Demo Desc!!!"); view2.setCode("6KH9K"); view2.setStatus("Active"); view3.setName("David,ngog 2015"); view3.setDate("31-1-2015"); view3.setDesc("This is a Demo Desc!!!"); view3.setCode("6KH9K"); view3.setStatus("Inactive"); view4.setName("David,ngog 2016"); view4.setDate("31-1-2015"); view4.setDesc("This is a Demo Desc!!!"); view4.setCode("6KH9K"); view4.setStatus("Active"); view5.setName("David,ngog 2017"); view5.setDate("31-1-2015"); view5.setDesc("This is a Demo Desc!!!"); view5.setCode("6KH9K"); view5.setStatus("Inactive"); view6.setName("David,ngog 2018"); view6.setDate("31-1-2015"); view6.setDesc("This is a Demo Desc!!!"); view6.setCode("6KH9K"); view6.setStatus("Inactive"); view7.setName("David,ngog 2019"); view7.setDate("31-1-2015"); view7.setDesc("This is a Demo Desc!!!"); view7.setCode("6KH9K"); view7.setStatus("Active"); persons.add(view1); persons.add(view2); persons.add(view3); persons.add(view4); persons.add(view5); persons.add(view6); persons.add(view7); final ListView<ServiceView> listRepeat = new ListView<ServiceView>("listRepeat") { @Override protected void populateItem(final ListItem<ServiceView> item) { final WebMarkupContainer listContainer = new WebMarkupContainer("listContainer"); final Label name = new Label("name", item.getModelObject().getName()); final Label date = new Label("date", item.getModelObject().getDate()); final Label status = new Label("status", item.getModelObject().getStatus()); final WebMarkupContainer descriptionContainer = new WebMarkupContainer("descriptionContainer"); final Label desc = new Label("desc", item.getModelObject().getDesc()); final Label code = new Label("code", item.getModelObject().getCode()); descriptionContainer.add(desc); descriptionContainer.add(code); descriptionContainer.setOutputMarkupPlaceholderTag(true); descriptionContainer.setOutputMarkupId(true); descriptionContainer.setVisible(false); final RadioGroup radioGroup = new RadioGroup("radioGroup"); final Radio selectionRadio = new Radio("selectionRadio", new Model(Boolean.FALSE), radioGroup); selectionRadio.add(new AjaxEventBehavior("onclick") { @Override protected void onEvent(AjaxRequestTarget target) { for(Component acc: (ListView<String>)accordionContainer.get("listRepeat")){ final Component accord = (Component) acc.get("descriptionContainer"); if(accord.isVisible()){ accord.setVisible(false); target.add(accord); } } descriptionContainer.setVisible(true); selectionRadio.setModel(new Model(Boolean.TRUE)); radioGroup.add(selectionRadio); listContainer.add(radioGroup); target.add(listContainer); target.add(descriptionContainer); } @Override protected void updateAjaxAttributes(AjaxRequestAttributes attributes) { super.updateAjaxAttributes(attributes); attributes.setAllowDefault(true); attributes.setEventPropagation(EventPropagation.STOP); } }); selectionRadio.setOutputMarkupPlaceholderTag(true); radioGroup.add(selectionRadio); radioGroup.setOutputMarkupPlaceholderTag(true); listContainer.add(radioGroup); listContainer.add(name); listContainer.add(date); listContainer.add(status); listContainer.setOutputMarkupPlaceholderTag(true); listContainer.add(new AjaxEventBehavior("onclick") { @SuppressWarnings({ "unchecked", "rawtypes" }) @Override protected void onEvent(final AjaxRequestTarget target) { for(Component acc: (ListView<String>)accordionContainer.get("listRepeat")){ final Component accord = (Component) acc.get("descriptionContainer"); if(accord.isVisible()){ accord.setVisible(false); target.add(accord); } } descriptionContainer.setVisible(true); target.add(listContainer); target.add(descriptionContainer); } }); listContainer.add(new AttributeAppender("onclick", new Model("$('"+listContainer.getMarkupId()+"').toggle('slow')"))); item.add(listContainer); item.add(descriptionContainer); item.setOutputMarkupPlaceholderTag(true); } }; listRepeat.setList(persons); listRepeat.setOutputMarkupPlaceholderTag(true); accordionContainer.add(listRepeat); accordionContainer.setOutputMarkupPlaceholderTag(true); mainContainer.add(accordionContainer); this.add(mainContainer); } @Override public void renderHead(IHeaderResponse response) { response.render(new PriorityHeaderItem(JavaScriptHeaderItem.forReference(getApplication().getJavaScriptLibrarySettings().getJQueryReference()))); } } <----------WicketApplication class------------> package com.proj.wicket.ui; import org.apache.wicket.protocol.http.WebApplication; import org.apache.wicket.request.Url; import org.apache.wicket.request.resource.UrlResourceReference; public class WicketApplication extends WebApplication { @Override public Class<HomePage> getHomePage() { return HomePage.class; } @Override public void init() { super.init(); this.getJavaScriptLibrarySettings().setJQueryReference(new UrlResourceReference(Url.parse(("https://code.jquery.com/jquery-1.10.2.js")))); } } <----------ServiceView class-----------> package com.proj.wicket.ui; public class ServiceView { private String name; private String date; private String status; private String code; private String desc; public String getName() { return name; } public void setName(String name) { this.name = name; } public String getDate() { return date; } public void setDate(String date) { this.date = date; } public String getStatus() { return status; } public void setStatus(String status) { this.status = status; } public String getCode() { return code; } public void setCode(String code) { this.code = code; } public String getDesc() { return desc; } public void setDesc(String desc) { this.desc = desc; } } <----------Home HTML-----------> The toggle("slow") part doesnt work. -- View this message in context: http://apache-wicket.1842946.n4.nabble.com/Accordion-folding-unfolding-smoothly-tp4669851p4669900.html Sent from the Users forum mailing list archive at Nabble.com. --------------------------------------------------------------------- To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org For additional commands, e-mail: users-h...@wicket.apache.org