Expandable Div

GoneShootin · 21-11-2007 12:42pm #1

I'm looking for some CSS that onClick or onMouseOver will expand a div with some content in it. Something like:

http://www.cxcglobal.ie/faq.php [click ? images]

But ideally it would "move" down, if you get me? Animated dropdown...

Any examples out there?

forbairt · 21-11-2007 12:49pm

you probably want to look into jquery or script aluclo us

http://docs.jquery.com/Tutorials:Live_Examples_of_jQuery

http://script.aculo.us/

enjoy

Evil Phil · 21-11-2007 12:53pm

Personally I'd recommend using jQuery for this kind of stuff but that might be too much of a change in your app at this stage. Google 'JavaScript Slide Down Menu' and you should get some examples.

<edit>
Heh, great minds think alike and all that.

forbairt · 21-11-2007 12:56pm

Evil Phil wrote: »

<edit>
Heh, great minds think alike and all that.

yeah! ... so I've no idea what happened there ... I'm scared

ianhobo · 21-11-2007 1:06pm

a simple method is to use javasricpt to change/toggle the div's style property from "none"

//hide/show javascript
function RemoveContent(d)
{
	document.getElementById(d).style.display = "none";
}

function InsertContent(d)
{
	document.getElementById(d).style.display = "";
}

with div's like this: (This one will show)

<div id="a" style="display:">

This one is hidden

<div id="b" style="display:none">

and for the links:

<a href="javascript:RemoveContent('a');InsertContent('b');">Toggle</a>

It's not the most elegant, but its quick and easy

forbairt · 21-11-2007 1:10pm

ianhobo wrote: »

It's not the most elegant, but its quick and easy

Its quick and its easy ... but it does involve your page's content jumping around quite a bit ... as suddenly and 400px high div appears .. and the rest of the content has to be dumped down. I think these days bit more is required.

(but for one of two forms I do use the method you describe.

ianhobo · 21-11-2007 1:13pm

well i suppose it depends how much content you have

here's where I've used it, it works pretty seamlessly I think?

this

forbairt · 21-11-2007 1:28pm

Your last teacher link is broken / displaying 2 teachers ...

and it works fine .. again it depends on the context

In the example he gave originally I think you can see the effects of a sudden display: inline; when there is content below the div

CuLT · 21-11-2007 2:24pm

One word answer that others have provided: jQuery.

That's how Wordpress and numerous other "web two point oh" apps do it.

CSS itself isn't desgined to do that.

ianhobo · 21-11-2007 2:41pm

forbairt wrote: »

Your last teacher link is broken / displaying 2 teachers ...
and it works fine .. again it depends on the context

Thanks for that!
And yes you're right. It works is this context.......maybe not so suitable for others

GoneShootin · 21-11-2007 3:46pm

jQuery it is - cheers folks

Eoin · 21-11-2007 5:39pm

moo.fx is a nice client-side only one.

GoneShootin · 22-11-2007 3:48pm

I see a blank screen...

Eoin · 22-11-2007 3:56pm

GoneShootin wrote: »

I see a blank screen...

That's because it's a very minimalist approach to design!

I'm getting the same, not too sure what's going on - the link was definitely working when I posted it.

forbairt · 22-11-2007 4:15pm

looks like its down for me too...

but heres the idiots guide ...
http://www.avinashv.net/tutorials/moofx/

grab the js code from there ... it shows pretty much what you are after as well

Eoin · 23-11-2007 1:34pm

That site's up and running again for what it's worth.

Serbian · 23-11-2007 6:54pm

Personally, I think jQuery is the easiest to use and the best. Making an expandable div is so simple:

$(document).ready(function() {
   $("#element").click(function() {
     $("#hidden-div").toggle();
   });
 });

GoneShootin · 23-11-2007 11:36pm

So what the hell am I missing from this jQuery thing. Can't get the paragraph to slide!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<script type="text/javascript" src="jquery.js"></script>

<title>JQuery Test</title>
</head>

<body>


<input type="button" value="Slide Out" class="buttonBslideup" />
<input type="button" value="Slide In" class="buttonBslidedown" />


<div lass="contentToChange">

<p class="fourthparagrap2323h">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, <strong>quis</strong> nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in <em>hendrerit</em> in vulputate velit <em>esse</em> molestie consequat, vel illum dolore eu feugiat nulla <strong>facilisis</strong> at vero eros et accumsan et <em>iusto</em> odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te <strong>feugait</strong> nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh <strong>euismod</strong> tincidunt ut laoreet <em>dolore</em> magna aliquam erat volutpat.</p>

<p class="fourthparagraph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, <strong>quis</strong> nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in <em>hendrerit</em> in vulputate velit <em>esse</em> molestie consequat, vel illum dolore eu feugiat nulla <strong>facilisis</strong> at vero eros et accumsan et <em>iusto</em> odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te <strong>feugait</strong> nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh <strong>euismod</strong> tincidunt ut laoreet <em>dolore</em> magna aliquam erat volutpat.</p>

</div>
<script>
$(document).ready(function(){
$("input.buttonBslidedown").click(function(){ $("div.contentToChange").find("p.fourthparagraph:hidden").slideDown("slow"); });
$("input.buttonBslideup").click(function(){ $("div.contentToChange").find("p.fourthparagraph:visible").slideUp("slow"); });
});
</script>
</body>
</html>

BRENSH · 24-11-2007 3:27pm

I have a solution on my site for this problem. Its really well scripted and browser dependant. I am using it on my site at the moment. http://irishradioportal.com

Go search for animated collapse . js on dynamic drive .com

forbairt · 24-11-2007 4:19pm

GoneShootin wrote: »

So what the hell am I missing from this jQuery thing. Can't get the paragraph to slide!

Had me stumped for a few minutes ...

then I noticed this wee lass

<div lass="contentToChange">

GoneShootin · 25-11-2007 2:55pm

forbairt wrote: »
Had me stumped for a few minutes ...

then I noticed this wee lass
<div lass="contentToChange">

Oh, Mr. Forbairt, I'd kiss you if you weren't swimming with disease!

forbairt · 25-11-2007 2:56pm

GoneShootin wrote: »

Oh, Mr. Forbairt, I'd kiss you if you weren't swimming with disease!

God Bless disease ... each and every one ... er am ...

Expandable Div

Comments