I have been working on making the 'timelineTile' div open and close, as well as making it close if another one is opened or if the background is clicked. I have successfully implemented the functionality to close the div when another one is clicked or when the background is clicked, but I am struggling to get the div to close when clicked on itself. You can see my code in action on this JSFiddle.
Here is a snippet of my code:
$(function () {
$('.timelineTile').click(function (evt) {
evt.stopPropagation();
$('.selected').children().removeClass('clicked');
$(this).toggleClass('clicked');
});
$(document).click(function () {
$('.timelineTile').removeClass('clicked');
});
});.timelineTile.clicked{
background:red;
width:500px;
height:300px;
-webkit-transition:height 1s, left 1s, -webkit-transform 1s;
transition:height 1s, left 1s, transform 1s;
}
.selected {
-webkit-transition:height 1s, left 1s, -webkit-transform 1s;
transition:height 1s, left 1s, transform 1s;
}
.timelineTile {
background:black;
color:white;
width:200px;
height:100px;
margin-bottom:20px;
-webkit-transition:height 1s, left 1s, -webkit-transform 1s;
transition:height 1s, left 1s, transform 1s;
}
.timelineTilehold {
background:pink;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="timelineTilehold">
<li class="selected"><div class="timelineTile">hello
</div></li>
<li class="selected"><div class="timelineTile">hello
</div></li>
<li class="selected"><div class="timelineTile">hello
</div></li></ul>