jQuery Toggle Div Horizontally Hide Text completley unti toggled
Question
I would like to create a div that is hidden below another div until it is toggled horizontally via button. The hidden div should contain text that is also hidden but will show also when div is toggled.
This example shows how it should look like. However when I add some text to one of the divs, the text shows. I want it show up only if function is executed and the whole div is toggled:
<style>
.map {height: 100px; width: 300px; position: absolute; background:green;}
.t1 {height: 100px; width: 0; position: absolute; background:red;}
.t2 {height: 100px; width: 0; position: absolute; background:blue;}
</style>
<html>
<div id="test">Map Details</div>
<div id="test2">Map Details 2</div>
<div id="close">Close</div>
<div class="map">Im a map</div>
<div class="t1 common"></div>
<div class="t2 common"></div>
</html>
<script>
$(document).ready(function () {
var visible=true;
$("#test").on('click', function() {
$('.t1').animate({width: visible ? 300 : 0}, "slow");
visible=!visible; });
$("#test2").on('click', function() {
$('.t2').animate({width: visible ? 300 : 0}, "slow");
visible=!visible;
});
$("#close").on('click', function() {
$('.common').animate({width: visible ? 0: 0}, "slow");
visible=!visible;
});
});
</script>
1 answers
solution1
1 2019-04-26 15:48:37
Use the callback parameter for animate which executes after animated and toggle the text by wrapping it in span
function f1(){
if (visible)$('span').show();
else $('span').hide();
}
//...
$('.t1').animate(
{width: visible ? 300 : 0},
"slow",f1);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.