Can anyone help me figure out how to center a div underneath another one when a specific div is clicked using programming? I've tried multiple solutions but nothing seems to work. Below is the code snippet that I have written. You can also check out the implementation on JSFiddle here.
<div ng-app>
<h2>Todo</h2>
<div ng-controller="TodoCtrl">
<div class="box" ng-click="do($event)">
<p> HEY THERE </p>
</div>
<div class="box2" ng-show="show">
</div>
</div>
</div>
function TodoCtrl($scope) {
$scope.show = false;
$scope.do = function(evt) {
var $this = $(evt.target);
var offset = $this.offset();
var width = $this.width();
var height = $this.height();
var centerX = offset.left;
var centerY = offset.top + height;
$('.box2').css({
'position': 'absolute',
'top': centerY,
'left': centerX
});
$scope.show = !$scope.show;
console.log(evt);
console.log(centerX, centerY);
};
}