Permalink
Browse files

fix toggle() & fadeToggle() for multiple elements

They now toggle element visibility based on each individual element
in the collection instead of just the first one.

Closes #475, fixes #394
  • Loading branch information...
marioestrada authored and mislav committed Apr 9, 2012
1 parent 6d5850a commit 023c6a8a9931adabf7ff18986c1c1bb703fc3d2e
Showing with 22 additions and 5 deletions.
  1. +5 −3 src/fx_methods.js
  2. +1 −1 src/zepto.js
  3. +10 −1 test/fx_functional.html
  4. +6 −0 test/zepto.html
View
@@ -37,7 +37,7 @@
$.fn.toggle = function(speed, callback) {
if (speed === undefined || typeof speed == 'boolean') return origToggle.call(this, speed)
- else return this[this.css('display') == 'none' ? 'show' : 'hide'](speed, callback)
+ else return this.each(function(){ $(this)[$(this).css('display') == 'none' ? 'show' : 'hide'](speed, callback) })
}
$.fn.fadeTo = function(speed, opacity, callback) {
@@ -56,8 +56,10 @@
}
$.fn.fadeToggle = function(speed, callback) {
- var hidden = this.css('opacity') == 0 || this.css('display') == 'none'
- return this[hidden ? 'fadeIn' : 'fadeOut'](speed, callback)
+ return this.each(function(){
+ var hidden = $(this).css('opacity') == 0 || $(this).css('display') == 'none'
+ $(this)[hidden ? 'fadeIn' : 'fadeOut'](speed, callback)
+ })
}
})(Zepto)
View
@@ -409,7 +409,7 @@ var Zepto = (function() {
return this.css("display", "none")
},
toggle: function(setting){
- return (setting === undefined ? this.css("display") == "none" : setting) ? this.show() : this.hide()
+ return this.each(function(){ (setting === undefined ? $(this).css("display") == "none" : setting) ? $(this).show() : $(this).hide() })
},
prev: function(selector){ return $(this.pluck('previousElementSibling')).filter(selector || '*') },
next: function(selector){ return $(this.pluck('nextElementSibling')).filter(selector || '*') },
View
@@ -11,7 +11,8 @@
<script src="../src/fx.js"></script>
<script src="../src/fx_methods.js"></script>
<style>
- #fx_test { text-align: center; background: darkred; color: white; font-size: x-large; }
+ #fx_test, #fx_test_2 { text-align: center; background: darkred; color: white; font-size: x-large; }
+ #fx_test_2 { background: darkblue; }
</style>
</head>
<body>
@@ -21,19 +22,27 @@ <h1>Zepto fx functional</h1>
<div id="fx_test" style="height: 100%; line-height: 170px">I ♥ fx</div>
</div>
+ <div style="width: 280px; height: 180px; background: #ddd; -webkit-user-select: none; margin-bottom: 1em">
+ <div id="fx_test_2" style="height: 100%; line-height: 170px">I ♥ fx</div>
+ </div>
+
<button onclick="$('#fx_test').hide('slow')">Hide</button>
<button onclick="$('#fx_test').show('slow')">Show</button>
<button onclick="$('#fx_test').show()">Reg. show</button>
<button onclick="$('#fx_test').toggle('slow')">Toggle</button>
+ <button onclick="$('#fx_test, #fx_test_2').toggle('slow')">Both: Toggle ('slow')</button>
+ <button onclick="$('#fx_test, #fx_test_2').toggle()">Both: Toggle</button>
<br>
<button onclick="$('#fx_test').fadeIn('slow')">Fade in</button>
<button onclick="$('#fx_test').fadeOut('slow')">Fade out</button>
<button onclick="$('#fx_test').fadeToggle('slow')">Fade toggle</button>
+ <button onclick="$('#fx_test, #fx_test_2').fadeToggle('slow')">Both: Fade toggle</button>
<div id="browser"> </div>
<script>
$('#browser').text(navigator.userAgent)
+ $('#fx_test_2').toggle()
</script>
</body>
</html>
View
@@ -813,6 +813,12 @@ <h1>Zepto DOM unit tests</h1>
$('#show_hide_div1').toggle(false)
t.assertEqual('none', $('#show_hide_div1').get(0).style.display)
+
+ $('#show_hide_div1').hide()
+ $('#show_hide_div2').show()
+ $('#show_hide_div1, #show_hide_div2').toggle()
+ t.assertEqual('', $('#show_hide_div1').get(0).style.display)
+ t.assertEqual('none', $('#show_hide_div2').get(0).style.display)
},
testOffset: function(t){

0 comments on commit 023c6a8

Please sign in to comment.