Change css cof another element if other css elements are enabled - css

Question

I cant figure out or even know if its possible but I'd like to change CSS elements of an ID if certain CSS elements are present. Eg:
Ive added the HTML for the menu and the HTML for the sidebar menu that I need to modify to change its size based on the menu item being toggled or not but only on toggle.
.nav-collapse.in.collapse {
#sidebarMenu {
width: min-content;
}
<div class="nav-collapse in collapse" style="height: auto;">
<ul class="nav nav-menu" id="navigationMenu">
<li class="item-test"><a target="_blank" href="/site/index.php/gii">GII </a></li>
<li class="item-test">Dashboard</li>
<li class="dropdown item-test" tabindex="-1"><a class="dropdown-toggle" data-toggle="dropdown" href="#">System <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="item-test">Email Log <img src="/site/images/modelIcons/emailLog.png"></li>
<li class="item-test">Flush Cache <img src="/site/images/modelIcons/action.png"></li>
<li class="item-test">Graph Types <img src="/site/images/modelIcons/type.png"></li>
<li class="item-test">Languages <img src="/site/images/modelIcons/language.png"></li>
<li class="item-test">Reports <img src="/site/images/modelIcons/report.png"></li>
<li class="item-test">Report Parameters <img src="/site/images/modelIcons/parameter.png"></li>
<li class="item-test">System Parameters <img src="/site/images/modelIcons/parameter.png"></li>
<li class="item-test">Translations <img src="/site/images/modelIcons/sourceMessage.png"></li>
<li class="item-test">Trashed Items <img src="/site/images/modelIcons/trash.png"></li>
</ul>
</li>
<li class="dropdown item-test" tabindex="-1"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Master <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="item-test">Asset Detail Types <img src="/site/images/modelIcons/assetDetailType.png"></li>
<li class="item-test">Asset Expiration Types <img src="/site/images/modelIcons/expire.png"></li>
<li class="item-test">Asset Statuses <img src="/site/images/modelIcons/status.png"></li>
<li class="item-test">Asset Types <img src="/site/images/modelIcons/type.png"></li>
<li class="item-test">Asset Type Categories <img src="/site/images/modelIcons/category.png"></li>
<li class="item-test">Asset Type Specification Types <img src="/site/images/modelIcons/assetSpecificationType.png"></li>
<li class="item-test">Risk Classifications <img src="/site/images/modelIcons/riskClassification.png"></li>
<li class="item-test">Class Classifications <img src="/site/images/modelIcons/classClassification.png"></li>
<li class="item-test">Currency <img src="/site/images/modelIcons/currency.png"></li>
<li class="item-test">Designations <img src="/site/images/modelIcons/type.png"></li>
<li class="item-test">Device Statuses <img src="/site/images/modelIcons/status.png"></li>
<li class="item-test">File Types <img src="/site/images/modelIcons/type.png"></li>
<li class="item-test">Industries <img src="/site/images/modelIcons/industry.png"></li>
<li class="item-test">Manufacturer Detail Types <img src="/site/images/modelIcons/assetDetailType.png"></li>
<li class="item-test">Mark Up Types <img src="/site/images/modelIcons/type.png"></li>
<li class="item-test">Measurement Types <img src="/site/images/modelIcons/type.png"></li>
<li class="item-test">Organisation Relationship Provider Types <img src="/site/images/modelIcons/type.png"></li>
<li class="item-test">Part Categories <img src="/site/images/modelIcons/partCategory.png"></li>
<li class="item-test">Quotation Statuses <img src="/site/images/modelIcons/status.png"></li>
<li class="item-test">Recall Directive Types <img src="/site/images/modelIcons/type.png"></li>
<li class="item-test">Sales Order Statuses <img src="/site/images/modelIcons/status.png"></li>
<li class="item-test">Service Task Outcomes <img src="/site/images/modelIcons/serviceTaskOutcome.png"></li>
<li class="item-test">Units of Measure <img src="/site/images/modelIcons/unitOfMeasure.png"></li>
<li class="item-test">User Detail Types <img src="/site/images/modelIcons/assetDetailType.png"></li>
<li class="item-test">Work Order Priorities <img src="/site/images/modelIcons/priority.png"></li>
<li class="item-test">Work Order Statuses <img src="/site/images/modelIcons/status.png"></li>
</ul>
</li>
<div class="searchbar-tabs">
<ul id="sidebarMenu">
<li class=""><i class="icon-white icon-home"></i> Dashboard</li>
<li id="actionMenu" class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-white icon-list"></i> Actions <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><i class="icon icon-align-left"></i> View Progress</li>
<li><i class="icon icon-download"></i> Export Work Order Spreadsheet</li>
<li><a target="_blank" href="/site/index.php/workOrder/workOrder/viewSummaryReport/assetGroupId"><i class="icon icon-print"></i> Work Order Summary</a></li>
<li><a class="batchReissueCertificates" href="/site/index.php/workOrder/workOrder/batchCertificateReissue/assetGroupId"><i class="icon icon-print"></i> Reissue (Update) Certificates</a></li>
<li><a class="batchReissueCertificates" href="/site/index.php/workOrder/workOrder/batchCertificateReissue/assetGroupId//replica/1"><i class="icon icon-print"></i> Reissue Certificates</a></li>
<li><i class="icon icon-remove"></i> Manage Trashed Work Orders</li>
<li><i class="icon icon-cog"></i> Manage Batch Work Orders</li>
</ul>
</li>
<li>
<a id="contextProcess" href="/site/index.php/workOrder/workOrder/process/permissionId"><img src="/site/images/modelIcons/process.png">Processes</a>
</li>
</ul>
</div>

Answer 1

get both element by id or class. toggle active class to the element which has to be watched. check if it has active class then it will be present and you can change the properties of other element. vice-versa.