[fw-mvc] Zend/JQuery collapsible fieldset

Hello,
I'm experimenting a weird behaviour of my Zend/Jquery built form,
I have built a complete form with zend, I set up fielset groups and would
like now to make them collapsible with jQuery. I did it already with a
normal html file and because of my lack of skills about zendframework, I
tried to follow the same "spirit" on the zend form.
Basically the problem is that the fieldset always toggles down and not up.
It works when I use the jQuery "hide" function which sets the display
property to "none" but doesn't when it uses a jQuery method playing with the
css in cache.
I know there would probably be a smarter to implement this feature with zend
and you are very welcome if you point it to me :)

but here are the basic codes :

[url=http://www.hiboox.fr/go/images/informatique/untitled,0f51c660ec65f7fb5e87f5863695c0e5.jpg.html][img]http://free0.hiboox.com/images/0911/0f51c660ec65f7fb5e87f5863695c0e5.jpg[/img][/url]

the layout :

[code]
<?php echo $this->headMeta(); ?>
<?php echo $this->headTitle(); ?>
<?php echo
$this->headLink()->prependStylesheet($this->baseUrl().'/css/site.css'); ?>
<?php echo
$this->headLink()->prependStylesheet($this->baseUrl().'/css/jquery.fancybox-1.3.4.css');
?>
<?php $this->jQuery()->enable();
echo $this->jQuery();?>
<?php echo
$this->headScript()->appendFile($this->baseUrl().'/scripts/jquery.fancybox-1.3.4.pack.js')?>
<?php echo
$this->headScript()->appendFile($this->baseUrl().'/scripts/collapsible.js')?>

<?php echo $this->escape($this->title); ?>

<?php echo $this->layout()->content; ?>

[/code]

the function :
[code]$.fn.collapsible = function ()
{

//toggle the component with class msg_body
$("#msg_head").click(function()
{
//var arrow = this.getElementsByTagName("img");
if ($(this).hasClass('msg_head_collapsed')){
$(this).removeClass('msg_head_collapsed').addClass('msg_head');
//arrow[0].src = "images/arrow_down.png";

}
else if ($(this).hasClass('msg_head')){
$(this).removeClass('msg_head').addClass('msg_head_collapsed');
//arrow[0].src = "images/arrow_right.png";

}


$(this).next(".msg_body").slideToggle('slow');



});................[/code]

the form : [code]<?php

class Application_Form_Testform extends Zend_Form
{

public function init()
{
$countryList=array('USA','UK');
$firstName = $this->createElement('text', 'firstName');
$firstName->setLabel('First Name')
->setAttrib('size',25)
->addValidator('StringLength', false,array(3,50))
->setValue('')
->setRequired(true);

$lastName = $this->createElement('text', 'lastName');
$lastName->setLabel('Last Name:')
->setAttrib('size', 25)
->addValidator('StringLength', false,array(3,50))
->setValue('')
->setRequired(true);




[....]

$this->addElements( array (

$firstName,
$lastName,
$address1,
$address2,
$postalCode,
$city,
$state,
$country,
$phone,
$emailAddress,
$website,
$userName,
$password,
$confirmPassword
)
);

$this->addDisplayGroup(array(

'firstName',
'lastName',
'userName',
'address1',
'address2',
'postalCode',
'city',
'state',
'country',
'phone'

),'contact');

$contact = $this->getDisplayGroup('contact');
/*$contact->setDecorators(array(

'FormElements',
'Fieldset',
array('HtmlTag',array('tag'=>'div','class'=>'msg_body'))

));*/

$contact->addDecorator('Fieldset');
$contact->setLegend('zoby zoba')->setAttrib('id', 'zob');

[/code]

thank you very much for the help...
Alex

--
View this message in context: http://zend-framework-community.634137.n4.nabble.com/Zend-JQuery-collapsible-fieldset-tp3335099p3335099.html
Sent from the Zend MVC mailing list archive at Nabble.com.