Click-to-Expand Content Box +REP!

[Firehorse]

Hey all,

i've been designing a new website recently for myself and this next I might need a little bit of help with so I thought i'd come and ask for your ideas on here.

http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm I'm aiming for something like this but more visually enhanced and a little more complex.

Here is the concept of what i'm trying to achieve:

How it should appear on the page before being expanded:
http://i39.tinypic.com/21j23bo.jpg

How it should appear after being clicked
http://i42.tinypic.com/2qmd6hu.jpg

However, I don't want the clickable part to be an image itself, or even a visible link, I just would like it so that when the unexpanded bar is clicked in any place it will toggle the hidden content in the box below, which also needs to be expandable for the amount of content it can hold.

Also hope to keep the gliding animation whilst it expands

I hope its also not a problem getting the entire page to expand when the content box is activated, if its any help then its this page here: www.danrogerson.com/test1/portfolio.php (http://www.danrogerson.com/test1/portfolio.php)

Thanks for your help and +REP to those who deserve it.

[Apolva]

You mean like


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js'></script>

<div id='clickMeBar' style='background:#777;color:#FFF;'>
Black blah blah, some stuff here<br />click on me.
</div>

<div id='pageContent' style='display:none;'>
BLAH<br />BLAH<br />BLAH<br />BLAH<br />BLAH<br />BLAH<br />BLAH<br />BLAH<br />BLAH<br />BLAH<br />
</div>

<script>$('#clickMeBar').click(function(){$('#pageContent' ).slideToggle('slow');});</script>

[Mushries]

What do you mean?

[Firehorse]

You mean like


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js'></script>

<div id='clickMeBar' style='background:#777;color:#FFF;'>
Black blah blah, some stuff here<br />click on me.
</div>

<div id='pageContent' style='display:none;'>
BLAH<br />BLAH<br />BLAH<br />BLAH<br />BLAH<br />BLAH<br />BLAH<br />BLAH<br />BLAH<br />BLAH<br />
</div>

<script>$('#clickMeBar').click(function(){$('#pageContent' ).slideToggle('slow');});</script>



Exactly that, thanks. But I just need to do it with the design slices..

I put your example up here to see what it would do. http://danrogerson.com/test1/portfolioq.php works perfectly by the looks of it in FF and IE.

[Apolva]

Glad to help.

You might want to look into the jQuery library documentation for future use as it can come in very handy.

http://docs.jquery.com/Main_Page

[Firehorse]

Brilliant!

http://danrogerson.com/test1/portfolioq.php

Looking great, ironed out the glitches in both browsers too. Will take a bit of maintaining for new content but that shouldn't be a problem. Sorry about the rep Apolva, says I need to spread.