Forums

jimmykup

Hi everyone,

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.

http://www.iavi.com/example.jpg

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'm very competent in the HTML and CSS involved in making this happen, but I'm having a hard time finding some javascript designed to do this. Any help?

jamy_za

I've created an example below which you can use.

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1&#46;0 Strict//EN&quot; &quot;http&#58;//www&#46;w3&#46;org/TR/xhtml1/DTD/xhtml1-strict&#46;dtd&quot;&gt;
&lt;html xmlns=&quot;http&#58;//www&#46;w3&#46;org/1999/xhtml&quot; xml&#58;lang=&quot;en&quot; lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; /&gt;
&lt;style type=&quot;text/css&quot;&gt;
	#box{background&#58; red; height&#58; 100px; width&#58; 100%; position&#58; relative;}
	#button, #button-active{position&#58; absolute; bottom&#58; 0; right&#58; 0;}
&lt;/style&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;http&#58;//code&#46;jquery&#46;com/jquery-1&#46;4&#46;2&#46;min&#46;js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
// Begin function
jQuery&#46;fn&#46;headerToggle = function(target, minHeight, maxHeight) {
return this&#46;click(function(){
			if(!$(this)&#46;hasClass(&quot;active&quot;)){
				$(target)&#46;animate({height&#58; maxHeight});
				$(this)&#46;toggleClass(&quot;active&quot;)&#46;text(&quot;Collapse&quot;);
			}
			else{
				$(target)&#46;animate({height&#58; minHeight});
				$(this)&#46;toggleClass(&quot;active&quot;)&#46;text(&quot;Expand&quot;);
			}
		});
};
// End function

$(document)&#46;ready(function() {
	$(&quot;#button&quot;)&#46;headerToggle(&quot;#box&quot;, &quot;100px&quot;, &quot;300px&quot;);
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;box&quot;&gt;
	&lt;a href=&quot;#&quot; id=&quot;button&quot;&gt;Expand&lt;/a&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

So it's

$(&quot;#example&quot;)&#46;headerToggle(target, minHeight, maxHeight);

jimmykup

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.

http://www.iavi.com/csstricks.html

I added overflow:hidden; to #box and that seemed to take care of the problem.

oliviathn

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.

jimmykup

Hi again,

I've almost finished implementing this script into my site.

http://www.iavi.com/index_expand.asp

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?

jamy_za

I've actually added that into the script.

When it is clicked, a class of "active" is added.

If you would like to remove the text changes. Remove:
".text("Collapse")" and ".text("Expand")" from the javascript

jimmykup

Thanks! I'm a bit slow, I should have seen that. :lol:

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.
http://www.iavi.com/items.asp?Cc=LGLCD

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.

http://www.iavi.com/itemdesc.asp?ic=22LD350C

Here are the scripts that are running for the light box.

<script type="text/javascript" src="http://www.iavi.com/js/lightbox/prototype.js"></script>
<script type="text/javascript" src="http://www.iavi.com/js/lightbox/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://www.iavi.com/js/lightbox/lightbox.js"></script>

Any idea where the problem is?

jamy_za

I really don't suggest loading more than one javascript library at the same time. If you would like to use lightbox, try the jQuery version instead.
http://leandrovieira.com/projects/jquery/lightbox/

That way you will avoid javascript conflicts.

jimmykup

All fixed! Thanks!

jonnyj99

In a very good description, and fine examples are given of user.However, the script is currently using the plain text as switches to animation. Here the same script that runs on a page that also uses a lightbox script.

treehouse : what would you like to learn today?

Forums

Expanding and Collapsing Accordion Script?