Hey there.

I posted yesterday on the end of another old post and didn't get a reply, so I thought I'd ask properly:

I'm trying to use mootools FX.Slide to make a full blog view appear when "View more/less" is clicked. I have used php to cut the blog entry in half, and add a "..." on the end.

I have then attempted to use the following code, to make it that the "View more or less" toggle makes the second part of the blog visible, and hides the "...", and then when it is clicked again, the "..." comes back and the rest of the blog disappears.

Any ideas why it isn't working? It works fine with just one toggle, but starts crying when I add two.

Help appreciated!


<script type="text/javascript">
window.addEvent( 'domready', function(){
	$$( '.moreInfoWrapper' ).each(function(item){
var thisSlider = new Fx.Slide( item.getElement( '.moreInfo' ), { duration: 500 } );
var otherSlider = new Fx.Slide( item.getElement( '.otherInfo' ), { duration: 500 } );
item.getElement( '.divToggle' ).addEvent( 'click', function(){ thisSlider.toggle(); 
item.getElement( '.divToggle' ).addEvent( 'click', function(){ otherSlider.toggle(); } );
	} );
} );
<div class="moreInfoWrapper">
	<h3><a href="<?php echo $item->get_permalink(); ?>"><?php echo $item->get_title(); ?></a></h3>
	$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>

Check out my medical revision website - http://www.MedRevise.co.uk