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

1
SmartManoj On

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);

http://jsfiddle.net/aLz6qh7t/7/