After creating a button group, I wanted the background of the previous or next button to move/slide to the selected one when the user clicks on it. I achieved this effect using pure CSS and simply adding or removing the 'active' class with jQuery. However, I encountered an issue where clicking on the 'All' button followed by the 'New' works correctly, but selecting 'Used' does not result in the correct slide positioning.
To achieve this effect, I utilized transitions and the ::before pseudo-element, aiming to solve the issue with minimal jQuery or pure CSS without extensive JavaScript or jQuery code.
The moving logic for the background is as follows:
.RadioButton .btn:first-child::before {
right: 0;
transition: .3s all ease;
}
.RadioButton .btn:nth-child(2)::before {
transition: .3s all ease;
}
.RadioButton .btn:last-child::before {
left: 0;
transition: .3s all ease;
}
The problem arises with .RadioButton .btn:nth-child(2)::before where using right:0 or left:0 individually causes the slide effect to malfunction in the intended position. Any suggestions for a solution?
My attempted solutions so far include:
$('.RadioButton').each(function(){
$(this).find('.btn').each(function(){
$(this).click(function(){
$(this).parent().find('.btn').removeClass('btn-active');
$(this).addClass('btn-active');
});
});
});body {
direction: rtl;
}
/* Other CSS styles are provided in the code snippet */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="RadioButton btn-group" id="searchType">
<a class="btn btn-default" data-val="0">Used</a>
<a class="btn btn-default" data-val="1">New</a>
<a class="btn btn-default btn-active" data-val="2">All</a>
</div>