[英]mootools toggle divs with css effect on button
I have the below script to show/hide some text. 我有以下脚本来显示/隐藏一些文本。 I want to make the toggle button an image that change when clicked on.
我想使切换按钮成为单击后会更改的图像。 (eg "+ Title 1" when collapse and "- Title 1" when expanded) Is there a way to accomplish this?
(例如,折叠时为“ +标题1”,展开时为“-标题1”)是否可以实现?
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(); } );
} );
} );
Html: HTML:
<div class='moreInfoWrapper'>
<div class='divToggle'>
<h3>Title 1</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>Title 2</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>
It could be so textually (or could be changed CSS class). 文本上可能是如此(或可以更改CSS类)。 It's a bit clumsy solution, but it works.
这是一个笨拙的解决方案,但它可以工作。 Maybe someone responds better.
也许有人反应更好。
$$('.moreInfoWrapper .moreInfo').each(function(item){
item.set('slide', { duration: 500 }).slide('hide');
});
$$('.moreInfoWrapper .divToggle').each(function(item){
item.addEvent('click', function(e){
var el = this.getFirst('h3');
if (this.getNext('div').getDimensions().height == 0) {
el.set('html', el.get('html').replace('+','-'));
} else {
el.set('html', el.get('html').replace('-','+'));
}
this.getNext('div').getFirst('.moreInfo').slide('toggle');
});
});
Ty it on this jsfiddle . 在这个jsfiddle上输入它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.