I apologize if the title is not the best.
When I click on ul#idlist li [red, blue, or green], it removes display none [.d-none] to:
It is used to display an overlay. when the overlay is displayed, I need you to close #actionsFrame by adding the .d-none class and display #settingsFrame by removing the .d-none class (the other 3 ids must remain active) when you click on the div #act_Settings located on the actions.html page.
I can't make this step.
Can you give me a hand please?
Thank you
// index.js
$("ul#idlist li").click(function() {
if($(this).data("user") == "red") {
const actionsFrame = $("#actionsFrame").hasClass("d-none");
if (actionsFrame) {
$('#FrameBack').removeClass('d-none');
$('#FrameDialog').removeClass('d-none');
$('#OverlaysClassic').removeClass('d-none');
$('#actionsFrame').removeClass('d-none');
}
}
});<!-- index.html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="idlist">
<li class="color" data-user="red">red</li>
<li class="color" data-user="blue">blue</li>
<li class="color" data-user="green">green</li>
</ul>
<div id="FrameBack" class="d-none">
<div id="FrameDialog" class="d-none">
<div id="OverlaysClassic" class="dialogBody d-none">
<iframe class="frame d-none" width="100%" height="100%" id="actionsFrame" align="top" frameborder="0" src="/actions.html"></iframe>
<iframe class="frame d-none" width="100%" height="100%" id="settingsFrame" align="top" frameborder="0" loading="lazy" src="/settings.html"></iframe>
<iframe class="frame d-none" width="100%" height="100%" id="selectorFrame" align="top" frameborder="0" src="/selector.html"></iframe>
</div>
</div>
</div><!-- actions.html -->
<div id="act_Settings">settings</div>