mootools fx slide anyone good?

[qwik3r]

Having a bit of trouble with mootools fx.slide - I posted in the mootools forum to no avail so I thought maybe some gurus could help me out here. I am brand spakin new to javascript, I understand the logic for the most part but yeah I know its like playing with fire and your not a fireman, don't bother until your properly trained. I still need some help though.

Ok so a bit of a preface.
FX.slide http://demos.mootools.net/Fx.Slide is what I am using.

I am trying to achieve the following.
User clicks more info and a div slides down with more info, it is initially hidden etc. I want them to be able to toggle it on and off.

The code for ONE of these with a div ID is:

window.addEvent('domready', function(){
	var mySlide = new Fx.Slide('moreinfo'
			$('toggle').addEvent('click', function(e){
				e = new Event(e);
				mySlide.toggle();
				e.stop();
			});
			
			mySlide.hide();	
		
	
		});

Toggle is the link and moreinfo is the div. Now this only works with ONE div right now and it only works with IDs.

So I was wondering if someone with experience in javascript or mootools could help me in doing multiple divs.

So say I have 10 divs all with the class "moreinfo" and the toggle is always "toggle" - I have tried and googled and searched mootools forum and didn't come across any relevant info, assistance would be great, thanks.

[qwik3r]

anyone?

[campbellm]

Originally Posted by qwik3r

Having a bit of trouble with mootools fx.slide

This is a bit rough and ready, but it should do what you want.

You can see a demo of it here - but with only four sliding elements. To add more, just copy each the HTML for each div.

Rather than trying to ID all the elements (which is a headache and doesn't scale) better to wrap each slider in a div with it's own class. This makes associating the toggle element and the sliding element simple since they both children of the wrapper div.

We then need to just loop through each wrapper div - making each child slider element into a slider and adding the click event to each toggle.

BTW - the code given assumes there is one and only one element of each class (ie divToggle and moreInfo) within the wrapper div. You should probably use $chk( ... ) to ensure you don't get errors if either of the elements are missing.

I tested this only with FF and Safari on Mac.

javascript:

window.addEvent( 'domready', function(){
	$$( '.moreInfoWrapper' ).each(function(item){
		var thisSlider = new Fx.Slide( item.getElement( '.moreInfo' ), { duration: 500 } );
		thisSlider.hide();
		item.getElement( '.divToggle' ).addEvent( 'click', function(){ thisSlider.toggle(); } );
	} );
} );

CSS

body
{
	font-size: 0.7em;
	background-color:#dddddd;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
h3
{
	font-size: 0.9em;
	font-weight: bold;
}
.divToggle
{
	color: #ffffff;
	background-color:#0033cc;
	padding: 8px;
}
.moreInfoWrapper
{
	float: left;
	width: 128px;
	border: 2px solid #dddddd;
	background-color: #ffffff;
	padding: 0px;
}
.moreInfo
{
	padding: 2px;
}

HTML

	<div class='moreInfoWrapper'>
		<div class='divToggle'>
			<h3>Click to Show/Hide</h3>
		</div>
		<div class='moreInfo'>
			<h3>More Info About Item 1</h3>
			<p>Here is some content.</p>
			<p>More Content</p>
			<p>End of Content</p>
		</div>
	</div>
	<div class='moreInfoWrapper'>
		<div class='divToggle'>
			<h3>Click to Show/Hide</h3>
		</div>
		<div class='moreInfo'>
			<h3>More Info About Item 2</h3>
			<p>Here is some content.</p>
			<p>More Content</p>
			<p>End of Content</p>
		</div>
	</div>

etc etc

HTH.

[qwik3r]

Great! thanks for coming to the rescue man!

[Mini0n]

Sorry to dig this up, but I was trying to do the same thing as qwik3r, and tried to use campbellm's tip but it won't work.

FireBug tells me

this.element has no properties

this.offset = this.element.offsetHeight;

Does anyone know what this means?
I'm doing everything as the example campbellm uses...

TIA

[campbellm]

sorry - seems a bunch of people still want the example to look at. I had taken it down but it's now back - unfortunately have to change the url.
multipleSliders.html

Campbell

[bigonroad]

Just came accross this, and it works well. However, I want to use it to hide the elipse as well - in other words, for divToggle to toggle two divs, one that is currently hidden to become visible, and one that was visible to hide. Here's my code -

<script type="text/javascript">
window.addEvent( 'domready', function(){
	$$( '.moreInfoWrapper' ).each(function(item){
		var thisSlider = new Fx.Slide( item.getElement( '.moreInfo' ), { duration: 500 } );
		thisSlider.hide();
		var otherSlider = new Fx.Slide( item.getElement( '.otherInfo' ), { duration: 500 } );
		otherSlider.show();
		
		item.getElement( '.divToggle' ).addEvent( 'click', function(){ thisSlider.toggle(); 
		item.getElement( '.divToggle' ).addEvent( 'click', function(){ otherSlider.toggle(); } );
	} );
} );
</script>

<div class="moreInfoWrapper">
	<h3><a href="<?php echo $item->get_permalink(); ?>"><?php echo $item->get_title(); ?></a></h3>
	<p><?php 
	$description=$item->get_description();
	$intro = cutText($description, 175);   
	echo $intro.'<div class="otherInfo">...</div>';
	?>
	<div class="moreInfo">paragraph to appear here</p>
        <p><small>Posted on <?php echo $item->get_date('j F Y | g:i a'); ?></small></p></div>
	<p><div class='divToggle'> <a href="#">read more/less... </a></div>

any ideas?

[bigonroad]

Would really appreciate some help on this one!