Ok so I am working on a new site, and I had this idea but I can't figure out how to implement it. All of my searches have taken me to examples of things other than what I want. So you don't have to tell me how to do it, just what it's properly called so I can look it up myself and learn.

 

I want to have a list of subjects on a page like example 1, they will be images rather than straight text because I want to use clever fonts that most people probably don't have. The effect that I am trying to achieve is to have the visitor click on the i subject (image) and then have this text box with the description or other random information scroll smoothly underneath the subject, pushing the other subjects down to make room. Shown in example 2. Another click on the subject would then hide the text bringing it back to example 1.

 

Any help would be much appreciated.

 

Example1

 

Example2

Probably not exactly what you wanted...

 

http://www.dynamicdrive.com/dynamicindex17...ntentslider.htm

http://www.dynamicdrive.com/dynamicindex17...tedcollapse.htm

http://www.dynamicdrive.com/dynamicindex17...tchcontent2.htm

That's great thank you, the second link is exactly what I was looking for.

ok so i have it implemented, somewhat, it isn't working quite right and I am not sure where the problem is. you can look for yourself at v3ritas.com, and by the way the content that is in each box should be the same as the subject line. At present it's only displaying the last subjects content regardless of which you click on.

Hi v3ritas,

 

You could try another solution such as the mootools javascript library; they have a great accordion feature that will do what you want (and more!).

 

Rob

I will give that one a try, but, how can I alter this java to have nothing open upon reaching the page?

You can change the way mootools shows the accordions by reading this documentation page. It is a very versatile system.

Yea, I am comparing the mootools script to the one I already had, trying to see how to mimic the functionality

I remember reading something somewhere on there about needing a domready event somewhere, but now I can't find it!

This is all the code you need, to get the mootools accordion working (taken from the mootools documentation). Remember to include the mootools framework scripts at the top as well.

 

java script:

var accordion = new Accordion('h3.atStart', 'div.atStart', {
opacity: false,
onActive: function(toggler, element){
	toggler.setStyle('color', '#ff3300');
},

onBackground: function(toggler, element){
	toggler.setStyle('color', '#222');
}
}, $('accordion'));


var newTog = new Element('h3', {'class': 'toggler'}).setHTML('Common descent');

var newEl = new Element('div', {'class': 'element'}).setHTML('<p>A group of organisms is said to have common descent if they have a common ancestor. In biology, the theory of universal common descent proposes that all organisms on Earth are descended from a common ancestor or ancestral gene pool.</p>');

accordion.addSection(newTog, newEl, 0);

 

HTML

<h3>The Mighty Accordion</h3>

<div id="accordion">
<h3 class="toggler atStart">History</h3>
<div class="element atStart">
	<p>Section 1</p>
</div>

<h3 class="toggler atStart">Evidence of universal common descent</h3>
<div class="element atStart">
	<p>Section 2</p>
</div>

<h3 class="toggler atStart">Examples of common descent</h3>
<div class="element atStart">
		<p>Section 3</p>
</div>
</div>

 

CSS

.toggler {
color: #222;
margin: 0;
padding: 2px 5px;
background: #eee;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #f5f5f5;
border-left: 1px solid #f5f5f5;
font-size: 11px;
font-weight: normal;
font-family: 'Andale Mono', sans-serif;
}

.element {

}

.element p {
margin: 0;
padding: 4px;
}

 

You can find the example code at the top of this documentation page, by clicking on "Js", "HTML" or "CSS" at the top right.

 

Rob

I found it actually on this page so there was more than just the js on the demo page. I also didn't realize I needed to download -> upload the full mootools library (not very good with java). But I have gotten it working now, as you can see if you look at the page. Now I am just trying to make it look appropriate.

 

EDIT: I didn't realize I hadn't linked the site I was actually working on so you could see what I had done/not done it's here

Nice one, looking great!

 

Rob

It's a work in progress, but yea don't forget about needing this little bit of code when ever using for yourself or telling someone else to use mootools:

 

window.addEvent('domready', function() {
// HERE IS WHAT YOU READ IN JS CODE
});

.