With a click event, I attempt to dynamically add/remove classes by using data attributes on another div.
Upon clicking "Text 2," the initial display of "FLAG 1" is set to none, and the background color of "DOT" should change. The association between the text elements and their corresponding flags and dots above should be maintained.
I already have classes named selected and active.
//planned selector
var familyTariffSelected = '.boxy';
var builderCheckoutStep = '.container .box';
var familyTariffSelectedData = $('.builder-tariff-family.selected').attr('data-selected');
var builderCheckoutStepData = $('.builder-checkout-steps .step.active').attr('data-selected');
$(familyTariffSelected).on('click', function() {
$(familyTariffSelected).removeClass('selected');
$(this).addClass('selected');
});.container{
border: 2px black dotted;
display: flex;
justify-content: space-between;
}
.event-box{
display:flex;
margin: 20px 0;
background-color: gray;
justify-content: space-between;
}
.container .box .flag{
display:none;
}
.container .box .dot{
border: 1px solid green;
color:black;
}
.container .box.active .flag{
display: block;
background-color: green;
color:white;
}
.container .box.active .dot {
background-color: green;
color:white;
}
.boxy {
background-color: yellow;
cursor:pointer;
}
.boxy.selected {
background-color: #64B246;
} <div class="container">
<div class="box active" data-selected="dalib-1"><p class="flag">FLAG 1</p> <span class=" dot">DOT</span></div>
<div class="box" data-selected="dalib-2"><p class="flag">FLAG 2</p> <span class=" dot">DOT</span></div>
<div class="box" data-selected="dalib-3"><p class="flag">FLAG 3</p> <span class=" dot">DOT</span></div>
<div class="box" data-selected="dalib-4"><p class="flag">FLAG 4</p> <span class=" dot">DOT</span></div>
<div class="box" data-selected="dalib-5"><p class="flag">FLAG 5</p> <span class=" dot">DOT</span></div>
</div>
<div class="event-box">
<div class="boxy" data-selected="dalib-1">TExt 1</div>
<div class="boxy" data-selected="dalib-2">TExt 2</div>
<div class="boxy" data-selected="dalib-3">Text 3</div>
<div class="boxy" data-selected="dalib-4">Text 4</div>
<div class="boxy" data-selected="dalib-5">TExt 5</div>
</div>
<script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>