CSS line help

[tebrown]

Hey,

 

In the link below, i have provided a jsFiddle document which shows the work I have currently got.

 

What i am current have trouble with is that when i click 'Joe Bloggs' the hidden content appears yes, although i would like the purple line to be one whole line (instead of two).

 

So basically, when the user clicks on 'Joe Bloggs' the purple line will automatically be adjust to the amount of content that will be there.

 

The jsFiddle work: http://jsfiddle.net/7pUuD/

 

Any help much appreciated. Cheers.

[spiderwell]

yo will never achieve this with this lay out of Divs, unless you css differently, why not get a button that just increases the height of the div?

[Mahngiel]

^^ this

 

but you can achieve it by making a 1px X 3px purple image and apply it to the background with positioning to line it up

[denno020]

Why don't you put both the button and the content that is hidden inside a single div, and give it a left border of 3px and the colour purple. Then when the name is pressed, the new content will be shown, which will stretch the parent div that they're both in, which in turn would stretch the purple line down.

 

Sorry if you're already fixed the issue, I've only just looked at the date..

 

Denno

[denno020]

I've done something really quick here, which demonstrates what I mean. You'll have to play with the margin's and paddings to get it lined up as it was before, but that shouldn't be too much of a problem.

 

http://jsfiddle.net/denno020/P2Uga/