We Keep Coding

Hide Div if other Div has HTML "hidden" attribute in it

I'm really new to Jquery, JavaScript, Html
In our WordPress shop, there's an alert message that only appears if the user is below his set "Order Minimum Total".
i've looked in the source code and i saw that when the message is not visible on the page, the DIV "wcc-validation" has "hidden" added in its Class.
That's a copy of the code <div class="wcc-validation hidden" id="wcc-validation">
What we need is for our SideCart button to be set "display:none", whenever wcc-validation message appears on the screen (doesn't have the Class attribute of "hidden")
Whenever wcc-validation message disappears and gets the Class Attribute "Hidden" - make the SideCart button appear on the screen. (display:block?)
I've researched a bit and realized this cant be done with CSS,
I dont mind adding JS/Jquery snippets to make it work, but couldn't figure out how to spot a DIV that has a "hidden" Class attribute in it - and apply the show/hide on the sidecart button from that.
thanks a lot.
adam

you can check for the class 'hidden' if it is available for the 'wcc-validation', Like the following snippet:
jQuery(document).ready(function($){
if($('#wcc-validation').hasClass('hidden')){
$('.to_hide').hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wcc-validation hidden" id="wcc-validation">
<div class="to_hide">to hide based on hidden class</div>

You can check the value like this.
function checkValue(){
let ele = document.getElementById('wcc-validation')
if (ele.value) {
do what you want. change css, style etc
}
}

How do I removeAttribute() hidden from p2? doesn't seem to do anything as is

I'm trying to change the attribute of an object with removeAttribute to take away the hidden status of it but so far nothing seems to work.
My code seems to have no effect. Am I doing something wrong?
function changePage() {
document.getElementById.("p2");
p2.removeAtribute.("hidden") ;
}
I've also tried it all on one line as well like so
function changePage() {
document.getElementById.("p2").p2.removeAtribute.("hidden") ;
}

I've never seen the use of dots before opening parentheses.
E.g.
document.getElementById.("p2").p2.removeAtribute.("hidden") should be document.getElementById("p2").removeAtribute("hidden")
(You are also referencing the element by id after you just retrieved it, which is unnecessary.)
Your first example didn't work because you retrieved the element and did nothing with it, then tried to access a p2 variable that wasn't declared. Again, you also have the . before parentheses.
Here's the js example:
function changeVisibility()
{
var p2 = document.getElementById('p2');
switch (p2.style.visibility)
{
case 'hidden':
document.getElementById('p2').style.visibility = 'visible';
break;
case 'visible':
document.getElementById('p2').style.visibility = 'hidden';
break;
}
}
<div id="p2" style="visibility:hidden">
test
</div>
<br />
<button onclick="changeVisibility()">
change visibility with basic js
</button>
And here's the jQuery example:
function changePage()
{
$('#p2').toggle();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="p2" style="display:none">
test
</div>
<br />
<button onclick="changePage()">
change visibility with basic js
</button>
The basic JS version uses the visibility style, and you can see that it doesn't collapse the element, it only makes it invisible.
jQuery has a nice built-in .toggle function that changes the display of the element. If it is hidden, it collapses the element. When the element is displayed, it is re-assigned whatever the display style is for that element. Building that in basic js would take a lot more work, as you are then tracking state (if you want to make the method reusable). You can make jQuery work similarly to the basic js version if you use the css properties, but toggle is quite nice and simple.
Your main issue is that you were mixing the getting of the element with methods that are only available on jQuery objects. I suggest reading the jQuery tutorials for basic accessors, which can get elements by id, class name, etc.

Change css value between two styles on click of same button using javascript

I have an image upon which I want to bring a text on clicking the image. I applied the css display property to none and on click I changed it to block. Now again on clicking I want to change the display to none. How can I do that?
js:-
function showTerms(data){
document.getElementById(data).style.display = 'block';
}
html:-
<div style="display: none;" id="text1111" class="offer_text size-12">
<div class="TC">
<div class="condition">Terms & Condition</div>
</div>
<p></p>
<div><br></div>
<div>- The coupon code is valid for one time use per user account.<br></div>
<p></p>

You can achieve this with a toggle function, like so:
function toggleTerms(data){
document.getElementById(data).style.display = (document.getElementById(data).style.display == 'block' ? 'none': 'block');
}

Generally speaking, do not modify CSS directly in JavaScript (there are of course exceptions, but in this case you shouldn't).
Instead, define a CSS class like so:
.shown {display: block}
Then your JavaScript can be as simple as:
function showTerms(data) {
document.getElementById(data).classList.toggle("shown");
}
* If support for old browsers is needed, you'll need something a little more advanced to check if the class is on and toggle it manually.

Trying to override a dynamically generated inline style

I'm trying to quickly fix something that is broken on a wordpress site. The problem is that someone else created the soup sandwhich and I'm stuck fixing it. I have an element that shows up in two different sections on the page. The first is a post-status form, the second time it shows up is in a comment-add section that repeats indefinitely on the page. The block of code works on the comments, but doesn't work on the status form, so I wan't to simply hide it until I figure out how to A) find where the heck the code is being generated, B) fix the issue.
The element has a style that is being dynamically applied (assuming javascript) at load of the element. It starts off hidden, then something somewhere down the pipe shows it.
Here is what my code looks like, first the element that works:
<div class="activity-comments">
<div class="audio_controls fresh" style>
....
</div>
</div>
The block that is broken:
<div id="whats-new-post-in-box">
<div class="audio_controls fresh" style="display: block;">
...
</div>
<div>
So in that first block the code sits without a style in it, which for some odd reason whoever wrote it left the style tag in anyway without any style to apply (completely stupid and malformed code). But in the second element, the one that's broke, it has a display:block dynamically written in at run time. I'm trying to figure out how to force it to display:none. I've tried js, but I'm somehow not calling it correctly (not sure how to call nested elements, I only want the audio_controls within that nested ID but not the other class).
Anyone have any ideas for me?

You can do it with CSS:
#whats-new-post-in-box > .audio_controls.fresh {
display: none !important;
}
An !important style rule can override an inline style rule (unless the inline style rule is also !important).
Alternately, with JavaScript on any modern browser:
var list = document.querySelectorAll("#whats-new-post-in-box .audio_controls.fresh");
var n;
for (n = 0; n < list.length; ++n) {
list[n].style.display = "none";
}
For older browsers it's more of a pain:
var elm = document.getElementById("whats-new-post-in-box").firstChild;
while (elm) {
if (elm.className &&
elm.className.match(/\baudio_controls\b/) &&
elm.className.match(/\bfresh\b/)) {
elm.style.display = "none";
}
elm = elm.nextSibling;
}
Obviously, for the two JS solutions, you need to run that code after whatever it is that's setting the style in the first place...

Pretty sure you can write a CSS rule for #whats-new-post-in-box .audio_controls and mark it with !important.

Another way to hide the inner div, and this requires jQuery:
$('div.audio_controls', $('#whats-new-post-in-box')).hide();
This code select all div elements with an audio_controls class that are inside the element with an id of whats-new-post-in-box, and hides them.

How can I show an element that has display: none in a CSS rule?

I have a really simple external css stylesheet that has the following :
div.hideBox {
display:none;
}
So when the html page loads, the div with that class attribute 'hideBox' will not show on the page, which is what I want. But I the box to show/appear when a user clicks on a button on that same page. I tried to use the onclick event to do this, but the div won't show.
So for example, the code would be :
<script language="javascript">
function showmydiv() {
document.getElementById('mybox').style.display = "";
}
</script>
</head>
<body>
<div id="mybox" class="hideBox">
some output of text
</div>
<input type="button" name="ShowBox" value="Show Box" onclick="showmydiv()">
What's strange is that a setup similar to this works when I use visibility:hidden; position:absolute; and I can use a JavaScript function to show the <div>.
What am I doing wrong here?

Because setting the div's display style property to "" doesn't change anything in the CSS rule itself. That basically just creates an "empty," inline CSS rule, which has no effect beyond clearing the same property on that element.
You need to set it to something that has a value:
document.getElementById('mybox').style.display = "block";
What you're doing would work if you were replacing an inline style on the div, like this:
<div id="myBox" style="display: none;"></div>
document.getElementById('mybox').style.display = "";

document.getElementById('mybox').style.display = "block";

try setting the display to block in your javascript instead of a blank value.

I can see that you want to write you own short javascript for this, but have you considered to use Frameworks for HTML manipulation instead? jQuery is my prefered tool for such a task, eventhough its an overkill for your current question as it has SO many extra functionalities.
Have a look at jQuery here