For the life of me I can’t find a good accordion-style script for revealing and hiding information. I’m hoping the image below can accurately illustrate the kind of thing I’m looking to accomplish.
The image is a before and after screenshot. When the user clicks on the "Expand" button in the first image (or on anywhere on that banner dark green/blue banner), I would like the content of that full-width banner to extend and push (scroll) all of the content below it down to make room.
Then in the after screenshot there is a "Close" button that I would like to collapse that banner to it’s original state, and all of the information below it will scroll back up into view.
I’ve created an example below which you can use.
$("#button").headerToggle("#box", "100px", "300px");
<a href="#" id="button">Expand</a>
Thank you! This is exactly what I was looking for.
Unfortunately I’m getting an undesired affect when try to fill it with content. The content in the div#box doesn’t stay inside when it’s collapsed.
I added overflow:hidden; to #box and that seemed to take care of the problem.
Above very good description as well as nice examples are given by user. I tried so many times by myself to expand and collapse row or column in HTML to use in my online shopping project. I was took help of e books and guides from Google and w3school.com, I like above examples and very vast description of HTML controls.
I’ve almost finished implementing this script into my site.
However, the script currently uses plain text as the toggle for the animation. How can I change it so that instead of swapping in the text "Expand" and "Collapse" whenever the link is clicked, it swaps the class of the element instead?
Thanks! I’m a bit slow, I should have seen that.
I’ve run into a problem though. I think the script is clashing with a lightbox script I have running.
Here’s the accordion script running just fine on one page.
Here’s the same script running on a page that also uses a lightbox script. Both scripts are broken on this page. Remove one or the other fixes the opposite one. You’ll notice that the accordion expands but doesn’t collapse, and the image of the projector loads a new page instead of a lightbox popup.
Here are the scripts that are running for the light box.
Any idea where the problem is?
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".