Expand collapse feature without affecting the page content.

Question

Hi Friends, I am implementing a expand collapse feature on my page using div tag.

I am using asp.net with c#. I have succeeded with exapand collapse feature. Now i have to modify this feature so that when the user clicks on expand button, the page should not push down(the div tag consists of search parameters). When the user again clicks on the collapse button or clicks outside the div tag, it should get collapsed. Note: I dont want to increase my page height.

The expanded content should display like dropdown items.(I cant use ul and li) The expanded content should come infront of the page cotent(ex: flash advertisements maximizes to occupy the page on mouse over and gets collapsed on clicking close buttons - yahoo inbox)

Please suggest me, how to reply here.

Answer 1

General idea to do this.

1. Take the div out of the flow of the page. Give it an absolute position.

2. Give it a higher stacking order so that it will be in front of all elements. Use z-index property.

3. Bind a click on document so that the div will be closed/.

4. When clicked on the div prevent event bubbling so that document click won't be triggered.

There is no reply here, you can leave comments to the postings.