We Keep Coding

How to change a CSS class depending on if another CSS class combination is present?

I'm trying to hide an element(.woocommerce_before_checkout_form) on my checkout page, but only at the login step(.wpmc-login). In other words: I want to hide an element depending on CSS class combination.
When they logged in they automatically go one step further in the checkout process and from there on I want to show the element(.woocommerce_before_checkout_form) again.
Every step in the checkout has its own set of CSS classes. And the active step has an additional class called .current.
I tried to stack the login classes with the .current class and then tried to address the .woocommerce_before_checkout_form class but it did not work. This is what I tried in CSS:
li.wpmc-tab-item.current.wpmc-login + div.woocommerce_before_checkout_form {
display: none !important;
}
Any ideas on how to do it in CSS or Javascript?
Here is the full code:
<div class="woocommerce">
<div class="wpmc-tabs-wrapper wpmc-tabs-wrapper-breadcrumb wpmc-tabs-clickable">
<ul class="wpmc-tabs-list wpmc-4-tabs">
<li class="wpmc-tab-item current wpmc-login"></li>
<li class="wpmc-tab-item wpmc-billing"></li>
<li class="wpmc-tab-item wpmc-shipping wpmc-not-clickable"></li>
<li class="wpmc-tab-item wpmc-review wpmc-not-clickable"></li>
</ul>
</div>
<div style="clear: both;"></div>
<div class="wpmc-steps-wrapper">
<div id="woocommerce_before_checkout_form" class="woocommerce_before_checkout_form" data-step="step-review"></div>
</div>
</div>
I found a solution that worked for me:
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
if ( $( ".wpmc-login" ).is( ".current" ) ) {
$( "#woocommerce_before_checkout_form" ).hide();
}
</script>

i think this might be what your are looking for(a jquery solution):
$(document).ready(function() {
let selectionDiv = $('.wpmc-login');
if(selectionDiv.hasClass('active')){
$('.woocommerce_before_checkout_form').css('display', 'none');
}else{
$('.woocommerce_before_checkout_form').css('display', 'block');
}
});
since this will not always check the active class, you might want to change the document.ready into something like: onclick, or if you want to have it check it all the time, and don't link it to an event, google for an jquery observer(but that is quite overkill for this situation)

How to execute js code again whenever a class name change?

Sorry for my editting format in advance cos it's been a long time since I asked a question. I will try my best to follow all the rules.
So I have this list which works like an image carousel:
<div class="carousel">
<ul>
<li class="past"><img src="img1.png"/></li>
<li class="past"><img src="img2.png"/></li>
<li class="current"><img src="img3.png"/></li>
<li class="future"><img src="img4.png"/></li>
<li class="future"><img src="img5.png"/></li>
</ul>
</div>
Whenever I click on an image, the clicked item's class name will change to "current" and I will translateX <ul> to make "current" <li> look "centered". All of these are in "carousel" <div>.
However I have another div which has a background of an empty-screen iPhone mockup:
<div class = "iphone_screen">
<div>
<img class="display" src="blank_screen.png"/>
</div>
</div>
and I want to do this to the "iPhone" <div>:
var imgUrl = $("body").find(".current").find('img').attr('src');
$(".display").attr('src',imgUrl);
But this jQuery will only be executed once when I load the page.
So how do I execute my jQuery code again whenever I lick one of the <li> items and make the class name current change?
Update: Thank you all for the replies! I feel so stupid......I don't know why I ask this question.........I added a click function before and it didn't work.Then I started to look for alternatives. Now when I think about it, the selector must be wrong.

Since the event that drives everything comes from a click on the li you could run on a click for any li's (inside a ul) inside the carousel classed div.
$(".carousel > ul > li").click(function () {
var imgUrl = $("body").find(".current").find('img').attr('src');
$(".display").attr('src',imgUrl);
});

put your code in a function.
$(".carousel li").on("click" ,function () {
var imgUrl = $("body").find(".current").find('img').attr('src');
$(".display").attr('src',imgUrl);
});

Using jQuery to add class to containing li when a checkbox inside is clicked

Objective
Highlight (by adding a background-color to) the "row" <li> if a (nested) checkbox inside that row is clicked.
Background
In this feature I am working on the interface for a file management system. When a user clicks the checkbox they can then delete all the files checked. to give them visual feedback, i want all of their selected files to have a background color. This will be done by clicking a checkbox, then i want the <li> to be colored.
Current state
I found various helpful answers on stackoverflow but have a gap in knowledge and trying to fill that in. Most answers use the parent element. But that only helps me by coloring that specific parent that holds the checkbox.
Code
I have this demo on codepen
jQuery
$("#this-list :checkbox").on('click', function(){
$(this).parent().toggleClass("checked");
});
CSS
.checked {
background: red;
}
HTML
<div class="container">
<ul id="this-list">
<li>
<div class="row">
<div class="col-md-2">
<input type="checkbox" />
song.mp3
</div>
<div class="col-md-2">
2011
</div>
<div class="col-md-2">
1 gb
</div>
<div class="col-md-2">
2 min
</div>
</div>
</li>
<!-- More <li>s -->
</ul>
</div>

you could use closest to get the closest checkboxs li element:
$("#this-list :checkbox").on('click', function(){
$(this).closest('li').toggleClass("checked");
});
this method will bubble up the DOM starting from the checkbox until it finds a match for the given selector (li in this case).

Use .parents([selector])
For the li you want this
$(this).parents('li').toggleClass("checked");
Or if you only want the row highlighted
$(this).parents('.row').toggleClass("checked");
Or if you only want the cell highlighted
$(this).parents('.col-md-2').toggleClass("checked");

You are very close! You can use the .parents() method of jQuery and pass in the class .row. It would look like this:
$("#this-list :checkbox").on('click', function(){
$(this).parents(".row").toggleClass("checked");
});
EDIT:
As #showdev mentioned, if you want the li element, you can just do:
$(this).parents("li").toggleClass("checked");

Simply add another .parent() to add the checked class to the row (the parent of the parent):
$(this).parent().parent().toggleClass("checked");
See this CodePen fork.

As in this Codepen
$("#this-list :checkbox").on('click', function(){
$(this).closest("li").toggleClass("checked");
});
Alternatively, since the checkbox is contained inside a div which is inside the target li you can use: Codepen
$("#this-list :checkbox").on('click', function(){
$(this).parent().parent().toggleClass("checked");
});

how to add class on click event on another list

Problem is following. So, I have this HTML
<div class="sitemap">
<div class="collapse-all">
[alles Ausklappen / Einklappen]
</div>
<div class="collapse-list"> <!-- 1. box -->
<div class="collapse-box">
<h2>
Logo
</h2>
<!-- This "in" class for some reason helps us to keep all boxes closed -->
<div class="collpase-container collapse in" id="first-select-box">
<ul>
<li >
And I need to add class, lets say "active" to an element collapse-box when user clicks on div "collapse-all". I hope I made it clear.
Here is small screenshot from DOM.
LINK TO screenshot:
http://i62.tinypic.com/r8e8zs.jpg
pls try to edit this fiddle:
http://jsfiddle.net/ufe8n/1/

You can do this:
$(".collapse-all a").click(function(e){
e.preventDefault();
$(this).closest(".collapse-all").next().find('.collapse-box').addClass('active');
});
Is this you want.

You can use this code in click handler of .collapse-all div:
$(".collapse-all").click(function(){
$(this).next().find('.collapse-box').addClass('active');
});

$(".collapse-all").click(function(){
$(".collapse-box").addClass("active");
});

$(".collapse-all").live("click",function(){
$(".collapse-box").addClass("active");
});

Change DIV based on clicked TAB

I am doing a leaderboard for a website we are working on.
Essentially, we have a div with this months winner for location A
Below we have ajax tabs, where user can click tabs which relate to locations, like :
Location A
Location B
etc etc
So by default, when page loads, tab A is open. And the div above we need to give a matching ID, because...
I want as the user clicks tab B for the div above to change, with different DIV ID. So basically we can change content in the div based on the tab the user clicks.
So the content div is like:
<div id="???"> content goes here </div>
The tabs are like:
<ul class="tabs">
<li><span class="stateTab">NSW</span></li>
<li><span class="stateTab">QLD</span></li>
<li><span class="stateTab">VIC</span></li>
<li><span class="stateTab">SA</span></li>
<li><span class="stateTab">WA</span></li>
<li><span class="stateTab">ACT</span></li>
<li><span class="stateTab">NT</span></li>
<li><span class="stateTab">TAS</span></li>
<li><span class="stateTab">AUSTRALIA</span></li>
</ul>
So if user clicks #tab2 then a different DIV loads into the div id="???" .
I think its fairly simple, just cannot figure it out. I realise I possibly have to set all the divs up, like so:
<div id="tab1"> content goes here </div>
<div id="tab2"> content goes here </div>
<div id="tab2"> content goes here </div>
And set visibility hidden to the divs.. any help appreciated.
*** ADDED INFO *******
The tabs, onclick ( presently ) display content from dataTables.
So obviously when we click on tab1, the content below the tabs , shows the content fetched from our dataTables, in a div with id1
The issue now is, with wanting to change the content ABOVE the tabs aswell as the content BELOW the tabs... the 2 id's are conflicting, and one shows and one hides...
The TABS also change content below them, presumably we need to chain the id actions somehow, to get two sets of content to change in harmony

Set it up the way you planned in HTML adding style="display: none" to each div except the one you want to show by default. Then add to you javascript (at the bottom, or in $(function(){ //Document ready });
$('.tabs a').click(function(){
$('div[id^=tab]').hide();
$(this.href).show();
return false;
}
);
As for your Update, you can change your divs to have a class instead of an id. Like
Content Above 1
Content Above 2
Tabs
<div class="tab1 tabContent">Content Below 1</div>
<div class="tab2 tabContent">Content Below 2</div>
Then you can change the javascript:
$('.tabs a').click(function(){
$('div.tabContent').hide();
$('div.'+this.href).show();
return false;
}
);
You'll also need to remove the hashes from your anchors, so the href becomes "tab1" instead of "#tab1"

You could use jQuery to do this: http://jsfiddle.net/YQdQm/
Not sure if this meets your requirements exactly (also, haven't yet tested on IE).
var tabs = $('div[id^=tab]');
tabs.hide();
$('#tab1').show();
$('.tabs a').click(function () {
var tab_id = $(this).attr('href');
tabs.hide();
$(tab_id).show();
});

I would suggest use existing tab control from jquery UI
however if not you will need markup like that
<div class='tabs'>
<ul>
<li data-id='tab1'>tab 1</li>
....
</ul>
<div id='tab1'></div>
<div id='tab2' class='expanded'></div>
...
</div>
and code
$('.tabs ul li').bind('click',function() {
var id = $(this).data('id');
$('.tabs div').removeClass('expanded');
$('#'+id).addClass('expanded');
});

I know this is a bit brute force, but I like to do it this way:
JS:
function hidetabs(){
$("#tab1").hide();
$("#tab2").hide();
//And so on
}
function shobwtab(id){
$("#"+id).show();
hidetabs();
}
HTML:
<li><span class="stateTab">NSW</span></li>
Of course you could also add click listeners in your docready function to run the functions instead of using onClick.