Toggle hide and show on tap

[ddmorales]

I'm quite sure there is an easy way to do this, but somehow it wont come to me :)

What I'm trying to achieve is a toggle between hide() and show() when element is tapped. I can only make it work one way. Also a fade effect between them would be nice but I would settle of just getting it work!


var photo = new Ext.Carousel({
direction: 'horizontal',
ui: 'light',
flex: 1,
title: "photo",
listeners: {
afterrender: function (c) {
c.el.on('tap', function () {
Ext.select(".info").show();
})
}
},
items: [my items are here...]
});


I have some toolbars which have the .info class and the hide and show does work. Do I need to have some toggle listeners or how can I make this work?

Any help?

[aCa]

Not sure if I understood you.
You get it to work just not to toggle hidden or not? You could first check if Ext.select(".info").isHidden() first and then either show() or hide() depending on the response.

To get the slide effect on show() and hide() it should be possible to include an animate object.
Like


Ext.select(".info").hide({
type: 'slide',
direction: 'left'
});

[ddmorales]

Yes, you understood me correctly, I want to make this work:

- I tap an element and div's with .info class hides
- I tap the same element again and div's with .info class shows
- I tap the same element again and div's with .info class hides
- and so on...

I tried this but with no luck:



listeners: {
afterrender: function (c) {
c.el.on('tap', function () {
if (Ext.select(".info").isHidden)
{
Ext.select(".info").show();
} else
{
Ext.select(".info").hide();
}
})
}
}


It only hides the element so the isHidden is not working.. any ideas?

[cevatkerim]

is it possible to slide in/out search toolbar? so hidden at first then slide out.