We Keep Coding

JavaScript and HTML to show or hide an element

I think this is very easy, but I just can't seem to twig it at the moment. I want to use a JavaScript function to set the visibility of an HTML tag.
I realise the below is wrong as hidden doesn't take a boolean. I'm just struggling to click what the easiest way to do it is?
So I have some script like this:
<script>
function evaluateBoolean() {
if (location.hostname.indexOf("someval" > 0) {
return true;
} else {
return false;
}
}
</script>
And I wanted to use it something like this:
<div hidden="evaluateBoolean()">
this will be shown or displayed depending on the JavaScript boolean
</div>

I would recommend doing it by altering the display style in the JavaScript code.
const el = document.getElementById('container');
const btn = document.getElementById('btn');
btn.addEventListener('click', function handleClick() {
if (el.style.display === 'none') {
el.style.display = 'block';
btn.textContent = 'Hide element';
} else {
el.style.display = 'none';
btn.textContent = 'Show element';
}
});

You have a div with id: myDIV
<div id="myDIV" class="card-header">
Hello World
</div>
You then call this Javascript function to show the element:
function showDiv() {
document.getElementById('myDIV').style.display = "block";
}
and this one to hide it:
function hideDiv() {
document.getElementById('myDIV').style.display = "none";
}
Note, that you can hide a div by:
<div id="myDIV" class="card-header" style="display:none">
Hello World
</div>
And then call the function to show it.

You trigger must be outside of the element which you hide. because if hided you cant even clicked. The js function classList toggle would be good.
function evaluateBoolean() {
const d = document.querySelector('.w div');
d.classList.toggle('hide');
}
.w {
height: 40px;
background: yellow;
}
.hide {
display: none;
}
<div class="w" onclick="evaluateBoolean()">
<div> this will be shown or displayed depending on the javascript boolean </div>
</div>

You can't explicitly run js in your html, if you aren't using any framework like angular or react, where property binding is allowed.
For achieving your intentions with js you can use this approch:
Add to your div an id:
<div id="myDiv"> Toggled div </div>
In your js script modify your function evaluateBoleean() to show/hide the element:
function evaluateBoolean() {
const div = document.querySelector("#myDiv");
if (location.hostname.indexOf("someval" > 0) {
div.hidden = true;
} else {
div.hidden = false;
}

There's a very easy option:-->
having a blank text
firsly replace the html code with this:-->
<div hidden="evaluateBoolean()" id="ThingToBeHidden"> this will be shown or displayed depending on the javascript boolean </div>
and put js code:-->
document.getElementById("ThingToBeHidden").innerHTML = "";
So you have assigned the div to have it's special id which none other element has.
So now the js code selects the div with that id and then sets the context of it to blank.
If you want the text to appear again, the js code is:-->
document.getElementById("ThingToBeHidden").innerHTML = "this will be shown or displayed depending on the javascript boolean";

You can hide an element in several ways (using jQuery):
const o = $(cssSelectorForElementToStyle);
$(o).hide();
$(o).toggle();
$(o).css('display', 'none');
$(o).addClass('css_class_for_hiding_stuff');
Here using vanilla JavaScript:
const o = document.querySelector(cssSelectorForElementToStyle);
o.style.display = 'none';
o.classList.add('css_class_for_hiding_stuff');
But your question doesn't point out exactly when you are going to make this check. So let's assume you are going to check the boolean value once when the page is loaded and hide or show a given element according to that value:
$(document).ready(
() => {
if (evaluateBoolean() === true) {
// do nothing in this case
} else {
$('#elementWithThisId').css('display', 'none');
}
}
);
Without jQuery:
document.addEventListener("DOMContentLoaded", function() {
if (evaluateBoolean() === true) {
// do nothing in this case
} else {
document.querySelector('#elementWithThisId').style.display = 'none';
}
});

Change and change back text in button jquery

I would like to have a jquery button event where the first time a button is clicked a div (with class .explanation) appears and the text changes and the second time it is clicked the div is hidden and the text changes back to the original text. I can do the first part but the second part does not work. In the below changing - (toggleClass("hidden") - to - .fadeOut... - doesn't work either so I think I have got something wrong with if and else. Thanks in advance
$("button:nth-of-type(1)").click(function() {
if (this.text = "Read Explanation") {
$(".explanation").fadeIn("slow", function() {});
$(this).text("Hide Explanation");
} else {
$(this).text("Read Explanation");
$(".explanation").toggleClass("hidden");
}
});

change
if(this.text = "Read Explanation") {
to
if($(this).text() === "Read Explanation") {
a demo:
$("button:nth-of-type(1)").click(function() {
if ($(this).text() === "Read Explanation") {
//$(".explanation").fadeIn("slow", function() {});
$(this).text("Hide Explanation");
} else {
$(this).text("Read Explanation");
}
$(".explanation").toggleClass("hidden");
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div><button>Read Explanation</button></div>
<div class="explanation hidden">explanation</div>
$(this) is jquery object with text() attribute while this is pure js
object without text or text() attribute in this case.
= is assignment operator while === is Comparison operators

There are several issues in your code:
this should be $(this)
text should be text()
You are using assignment operator in if condition. It should be comparison operator == or strict comparison operator ===
You can toggle the hidden class outside if-else block
$( "button:nth-of-type(1)" ).click(function() {
if($(this).text() == "Read Explanation") {
$(this).text("Hide Explanation");
} else {
$(this).text("Read Explanation");
}
$(".explanation").toggleClass("hidden");
});
.hidden{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='explanation hidden'>Some explanation</div>
<button>Read Explanation</button>

you can't make decisions based on data that can change.
if the text of the button changes, you'll need to change your code.
by this way, if the text of the button changes, you need to change your data.
This is not the best option, but it may works.
https://jsfiddle.net/foo8drb2/8/
var data = {
1: "Read Explanation",
2: "Hide Explanation"
}
// asssign default id to the text
var id_text = 1; //1 id for "Read Explanation"
// add data attribute to the button
$("button:nth-of-type(1)").attr("data-id-text", id_text);
// event
$("button:nth-of-type(1)").click(function () {
if ($(this).attr("data-id-text") == 1) {
//change id_text -> 2 for "Hide Explanation"
id_text = 2;
// show hide options
$(".explanation").fadeIn();
} else {
//change id_text -> 1 for "Read Explanation"
id_text = 1;
// show hide options
$(".explanation").fadeOut();
}
// change data id
$(this).attr("data-id-text", id_text);
// update text
$(this).text(data[id_text]);
});

Thanks everyone. This seems to be the simplest / close to what I had. I changed as suggested by Ankit:
this to $(this)
text to text()
= to ==
Using - fade out - instead of - hide - helped
$( "button:nth-of-type(1)" ).click(function() {
if($(this).text() == "Read Explanation") {
$(".explanation").fadeIn( "slow", function() {
});
$(this).text("Hide Explanation");
} else {
$(this).text("Read Explanation");
$(".explanation").fadeOut( "slow", function() {
});
}
});

If logo id exists, hide another id on page in JQuery

Trying to hide a div if a logo exists. Tried a few things with no joy, can you spot the error?
if ($('#mylogo').css('display', 'block') {
$('#sign_up_now').css('display', 'none');
}
and
$(document).ready(function(){
if ($('#my_logo').length) {
$('#sign_up_now').css('display', 'none');
}
});
So if my my_logo is active (display:block) of even present. Hide the div with an ID of sign_up_now
Would be great to have two options working, as I might need to hide a div later if sign_up_now div exists too.
EDIT
When placing in the footer of the page, if running two JQuery functions. I assume they don't seperate script tags just closing off with a ;
<script>
$(document).ready(function () {
if ($('#intrica_logo').css('display') == 'block') {
$('#sign_up_now').css('display', 'none');
}
});
</script>
<script>
$(document).ready(function () {
if ($('tr#logout_button').css('display') == 'table-row') {
$('tr#sign_up_now').css('display', 'none');
}
});
</script>
or should it be
<script>
$(document).ready(function () {
if ($('#my_logo').css('display') == 'block') {
$('#sign_up_now').css('display', 'none');
}
if ($('tr#logout_button').css('display') == 'table-row') {
$('tr#sign_up_now').css('display', 'none');
}
});
</script>

try using :visible and is() to test if the logo is visible, use hide() to hide the logo
if ($('#mylogo').length && $('#mylogo').is(':visible')) {
$('#sign_up_now').hide();
}

$(document).ready(function(){
if ($('#mylogo').css('display') == 'block') {
$('#sign_up_now').css('display', 'none');
}
});
or
$(document).ready(function(){
if ($('#mylogo').css('display') == 'block') {
$('#sign_up_now').hide();
}
});
put any of these examples.

In your if statement you are assign the display property instead of checking.
Modify your code as below.
$(document).ready(function() {
if ($('#mylogo').css('display') == 'block') {
$('#sign_up_now').css('display', 'none');
}
});

You can get an element display property with the following snippet:
$(document).ready(function() {
if( $('#my_logo').css('display') == 'block' ) {
$('#sign_up_now').css('display', 'none');
} else {
//element's display is not block
}
});
Elements with visibility hidden or opacity zero are considered to be visible, because they have space in the layout. You can check if element is visible like the following snippet:
function isHidden (element) {
return $(element).is(":hidden") || $(element).css("visibility") == "hidden" || $(element).css('opacity') == 0;
}
var isShowed = !isHidden(checkElement);
If you want to check element is visible display != none and ignoring the parents visibility then you will find that doing .css("display") == 'none' is faster and will give you accurate visibility.

Here you go:
$(document).ready(function(){
if( $('#my_logo').css('display') == 'block' ) {
$('#sign_up_now').css('display', 'none');
} else {
$('#sign_up_now').css('display', 'block');
}
});

You can add a class to your element and detect if element has class or no
if($("#mylogo").hasClass("visible")){
$('#sign_up_now').css('display', 'none')
$("#mylogo").removeClass("visible");
}

How to disable onclick of a class

I would like to know how to disable the onclick event of a certain class. I am aware that you can use the CSS pointer-events: none; however I would like for the hover events to still work, just onclick to be disabled.
Also how do I re-enable them later? For example:
if (document.getElementById('wuzi').backgroundColor == "green" ) {
//disable onclick
} else {
//enable onclick
}
Thank you

You can just add and remove the listener to 'click':
var wuzi = document.getElementById('wuzi');
if (wuzi.backgroundColor === "green" ) {
wuzi.removeEventListener('click');
} else {
wuzi.addEventListener('click', clickHandler);
}
where clickHandler is your function for handling the click.

You can try as below:
var element = document.getElementById('wuzi')
if (element .backgroundColor == "green" ) {
//disable onclick
element.onclick = '';
} else {
//enable onclick
}

I would suggest you to add CSS class instead of comparing backgroundColor, then check set disabled property based on class
var element = document.getElementById('wuzi');
element.disabled = element.classList.contains("foo");

try returning false onclick:
var element = document.getElementById('wuzi')
if (element .backgroundColor == "green" ) {
//disable onclick by returning false from onclick
element.onclick = return false;
} else {
//enable onclick or do some appropriate action
}

I hope this will helps you
if (document.getElementById('wuzi').style.backgroundColor === "green" ) {
//disable onclick
this.onclick=null
} else {
//enable onclick
this.onclick=my_function;
}
Just define your function as you want
function my_function()
{
alert('enable');
}

Javascript/JQuery Nested if statements not working correctly

JSFiddle demonstrating problem (pretty hard to see with the corner box)
I have 4 elements that are linked to each button. When the button corresponding with the section is pressed, it should check that none of the other 3 elements are visible. If another section is visible, it should slide it up before sliding down the desired section.
I thought the best way to do this was nested if statements (if b is visible then if c is visible and so on). At the moment, it works for the first 2 elements, this being because the first if statement corresponds to each of them. However for the others, it's as if it doesn't even get past the first statement and just slides down the section anyway, resulting in multiple sections being open.
Am i using nested if statements incorrectly or is it something that isn't compatible? I don't know if it would be better to hide the sections using jquery instead of css, but i assumed it would work regardless. If I've missed anything out, feel free to ask.
Thanks
(Javascript Code)
$(document).ready(function(){
$("#web-design").click(function(){
if ($("#graphic-design-slide").css("visibility") == "hidden") {
if ($("#branding-slide").css("visibility") == "hidden") {
if ($("#film-production-slide").css("visibility") == "hidden") {
$("#web-design-slide").slideDown();
} else {
$("#film-production-slide").slideUp();
$("#web-design-slide").slideDown();
}
} else {
$("#branding-slide").slideUp();
$("#web-design-slide").slideDown();
}
} else {
$("#graphic-design-slide").slideUp();
$("#web-design-slide").slideDown();
}
});
$("#graphic-design").click(function(){
if ($("#web-design-slide").css("visibility") == "hidden") {
if ($("#branding-slide").css("visibility") == "hidden") {
if ($("#film-production-slide").css("visibility") == "hidden") {
$("#graphic-design-slide").slideDown();
} else {
$("#film-production-slide").slideUp();
$("#graphic-design-slide").slideDown();
}
} else {
$("#branding-slide").slideUp();
$("#graphic-design-slide").slideDown();
}
} else {
$("#web-design-slide").slideUp();
$("#graphic-design-slide").slideDown();
}
});
$("#branding").click(function(){
if ($("#web-design-slide").css("visibility") == "hidden") {
if ($("#graphic-design-slide").css("visibility") == "hidden") {
if ($("#film-production-slide").css("visibility") == "hidden") {
$("#branding-slide").slideDown();
} else {
$("#film-production-slide").slideUp();
$("#branding-slide").slideDown();
}
} else {
$("#graphic-design-slide").slideUp();
$("#branding-slide").slideDown();
}
} else {
$("#web-design-slide").slideUp();
$("#branding-slide").slideDown();
}
});
$("#film-production").click(function(){
if ($("#web-design-slide").css("visibility") == "hidden") {
if ($("#graphic-design-slide").css("visibility") == "hidden") {
if ($("#branding-slide").css("visibility") == "hidden") {
$("#film-production-slide").slideDown();
} else {
$("#branding-slide").slideUp();
$("#film-production-slide").slideDown();
}
} else {
$("#graphic-design-slide").slideUp();
$("#film-production-slide").slideDown();
}
} else {
$("#web-design-slide").slideUp();
$("#film-production-slide").slideDown();
}
});
$("#contactFormTitle").click(function(){
if ($("#contactFormArea").css("visibility") == "hidden") {
$("#contactFormArea").slideDown();
} else {
$("#contactFormArea").slideUp();
}
});
});

Your should add class to your container and before showing the desired container, hide all container with that class.
Example
<div class="accordion">
Content
</div>
<div class="accordion">
Content
</div>
<div class="accordion">
Content
</div>
$('.accordion').click(function() {
$('.accordion').slideUp();
$(this).slideDown();
});
Your example
$("#web-design").click(function(){
$(".div-to-hide").slideUp();
$("#web-design-slide").slideDown();
});
$("#graphic-design").click(function(){
$(".div-to-hide").slideUp();
$("#graphic-design-slide").slideDown();
});
<div class = "serviceSliderFilmProduction div-to-hide" id = "film-production-slide">
div-to-hide class is added to your container

Add a slider class (or any other) to each container and link the container with button using data attribute:
Button:
<button class="serviceButton displayed" data-id="#web-design-slide">Find Out More!</button>
Container:
<div class="slider serviceSliderWebDesign" id="web-design-slide">
...
</div>
Script:
$(".serviceButton").click(function(){
// grab the container id from data-id attribute of the button:
var el_id = $(this).data('id');
$('.slider:not('+el_id+')').slideUp('slow', function(){
$(el_id).slideDown();
});
});
DEMO
If you want to also toggle container on click, use slideToggle():
$(".serviceButton").click(function () {
var el_id = $(this).data('id');
$('.slider:not(' + el_id + ')').slideUp();
$(el_id).slideToggle();
});
DEMO