Struggling with a function I'm implementing for a website. My goal is to move and expand a div upon button click, with the text on the button changing to "close". When the close button is clicked, the div should return to its original position.
I've been trying everything but just can't seem to get it right.
Here's where I'm at so far:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var text = 1;
$('button').click(function(){
if(text == 1){
$("div.div1").toggleClass("animateSlide");
$('button').html('Go Back');
text = 0;
} else{
$("div.div1").toggleClass("animateSlide");
$('button').html('Start Animation');
text = 1;
}
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12 v-center">
<div class="content text-center">
<div class="col-xs-4 animated slideInRight ">
<div class="div1"><button>Start Animation</button></div>
</div>
<div class="col-xs-2 animated slideInRight"> <a href="#">hello</a>
</div>
<div class="col-xs-2 animated slideInRight"><p>hello</p>
</div>
</div>
</div>
<style>
.div1{
transition: all .5s;
background:#98bf21;
height:100px;
width:100px;
position:absolute;
}
.animateSlide{
width: 150px;
height: 150px;
opacity: .5;
margin-left:100px;
}
</style>
</body>
</html>