Reputation: 13
I have an absolute positioned div and a button that toggles a transform on-click using jQuery. However, the div moves down when the button is clicked which I do not want it to do, and I can't seem to find what's causing it, because this previously worked fine where the positioned element did not move when being toggled.
The problem can be solved by removing the top
and left
CSS properties, but then the div won't display where I'd like it to.
View the example on JSFiddle.
$('table').hide();
$('button').click(function() {
$(this).siblings('table').toggle('show');
});
// TOGGLE ICON TRANSITION
$(function() {
var icon = $('.dd-arrow');
var button = $('.view-products');
button.on('click', function() {
$(this).closest('div').find('.dd-arrow').toggleClass('active').css('display', 'block');
$(this).siblings('img').fadeToggle('fast');
});
});
.prices {
position: relative;
display: inline-block;
}
.prices .dd-arrow {
position: absolute;
top: 50%;
left: 50%;
transition: all .5s ease-in-out 0s;
}
.prices .dd-arrow img {
width: 20px;
}
.prices .dd-arrow.active {
transform: rotate(360deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="prices">
<button class="view-products" onclick="swapText()">View Products:</button>
<div class="dd-arrow"><img src="img/drop-down-arrow.svg" /></div>
<table>
<th>number</th>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
</div>
Upvotes: 0
Views: 2311
Reputation: 820
Please check if it is useful. thanks.
$('table').hide();
$('button').click(function () {
$(this).siblings('table').toggle('show');
});
// TOGGLE ICON TRANSITION
$(function () {
var icon = $('.dd-arrow');
var button = $('.view-products');
button.on('click', function () {
$(this).closest('div').find('.dd-arrow').toggleClass('active').css('display', 'block');
$(this).siblings('img').fadeToggle('fast');
});
});
.prices {
position: relative;
display: inline-block;
.dd-arrow {
position: absolute;
top: 0%;
left: 0%;
margin-left: 130px;
margin-top: 30px;
transition: all .5s ease-in-out 0s;
img {
width: 50px;
}
}
.dd-arrow.active {
transform: rotate(360deg);
}
}
<div class="prices">
<button class="view-products" onclick="swapText()">View Products:</button>
<div class="dd-arrow"><img src="https://cdn.pixabay.com/photo/2017/04/06/16/57/auto-2208807_960_720.png"/></div>
<table>
<th>number</th>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
</div>
Upvotes: 1
Reputation: 443
there is some informations :
You place your div with percentage. So it's percentage of the parent div. In your cas the parent div is <div class="prices">
.
The problem is that this div size increase when you click on the button due to the table show.
So the height is bigger and 50% is lower in the page than in the beginning.
There is a working solution :
.prices {
position: relative;
display: inline-block;
.dd-arrow {
position: absolute;
left: 50%;
transition: all .5s ease-in-out 0s;
img {
width: 20px;
}
}
.dd-arrow.active {
transform: rotate(360deg);
}
}
Upvotes: 0