How to Show One <Div> If JavaScript Enabled and a Different <Div> If It's Not

Show div if another div has content

You need to either set the button to display none prior to the window loading or add an "else" statement to hide the element:

.btn-01{
  display:none;
}

OR

$(document).ready(function(){
       if ($(".txt").html().length > 0) {
         $('.btn-01').show();
       }
       else
       {
         $('.btn-01').hide();
       }
     });

See the fiddle: https://jsfiddle.net/r89gg7tp/

IMPORTANT TO CONSIDER

If you have entered a line break between the starting and closing tags of the element, this will add to the length. You need to set the txt div to be in the following format:

<div class='txt'></div>

It may be better to change your function to this:

$(document).ready(function(){
       if ($(".txt").html().trim(' ').length > 0) {
         $('.btn-01').show();
       } else {
         $('.btn-01').hide();
       }
     });

This way you trim the whitespace before checking.

See the second fiddle: https://jsfiddle.net/r89gg7tp/3/

Hide Div if other Div has HTML hidden attribute in it

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>

How to show/hide div with toggle in different page

I copied what you wrote in your original code in jsfiddle using the same css I found there. Then I just rewrote the javascript part.

What it does is attaching a change event handler to any checkbox found on the page so that when their state it's changed, the corresponding label gets shown or hidden. The corresponding label is found using the checkbox id with the prefix label-.

In that event, the state of the checkbox changed gets pushed in the localStorage. At the very beginning, the page first checks if there's any state saved for each of the checkbox found and in case there is, its state gets updated correspondingly.

In Firefox localStorage methods (getItem/setItem) return SecurityError: The operation is insecure. I could run that code on a dedicated html page to verify it's working correctly (on Chrome for sure). So to avoid any problem at first, I added a securityFlag on top of the js code. When that flag is set to true, the localStorage won't be engaged at all so that you could see the preview here with no errors.

//if set to true, any operation involving localStorage will be excluded
let securityFlag = true;

/**
 * Initialize the Checkboxes state according to what's stored on localStorage
 */
function initCheckboxStateBasedOnLocalStorage(){
    //for each of the checkboxes on the page
    document.querySelectorAll('input[type="checkbox"]').forEach( (checkbox, i) => {
    
        //if securityFlag is true, skip the operation
        if(securityFlag) return;
    
        //retrieves the value stored in localStorage paired to the id passed
        let valueStored = window.localStorage.getItem(checkbox.id);
        //if valueStored is set
        if(valueStored == 'true' || valueStored == 'false')
            //sets the checkbox value with what was retrieved from localStorage
            checkbox.checked = valueStored == 'true' ? true : false;
    });
}

/**
 * Will hide/show the label corresponding to checkbox and will save its value on localStorage
 * It will be registered as the handler of the change event of every checkbox in the page
 */
function onCheckBoxStateChange(){

    let checkbox = event.target;

    //guesses the id of the label dedicated to the checkbox triggering the event
    let msgContainer = document.getElementById(`label-${checkbox.id}`);
    //if this checkbox is checked,
    if (checkbox.checked){
        //show the corresponding label
        msgContainer.style.display = "block";
        //if securityFlag is true, skip the operation
        if(securityFlag) return;
        //sets the state in localStorage for this.id
        window.localStorage.setItem(checkbox.id ,true);
    }
    //otherwise
    else{
        //hide the corresponding label
        msgContainer.style.display = "none";
        //if securityFlag is true, skip the operation
        if(securityFlag) return;
        //sets the state in localStorage for this.id
        window.localStorage.setItem(checkbox.id ,false);
    }
}

//When the document has been loaded
document.addEventListener("DOMContentLoaded", function() {
  //for each of the checkboxes on the page
  document.querySelectorAll('input[type="checkbox"]').forEach( (checkbox, i) => {
    //attach an handler to the event change
    checkbox.addEventListener("change", onCheckBoxStateChange );
  });
});

//reflect the value of checkboxed according to what's stored on localStorage
initCheckboxStateBasedOnLocalStorage();

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #2196F3;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

/*END OF TOGGLE SWITCH*/

.hideme {
  padding:20px;
  background: blue;
  color: white;
  font-weight: 800;
  text-align: center;
}

<p>checkbox1</p>
<label class="switch">
  <input type="checkbox" id="ck1">
  <span class="slider round hide-off"></span>
</label>

<br><br>

<p>checkbox2</p>
<label class="switch">    
   <input type="checkbox" id="ck2">
   <span class="slider round hide-off"></span>
</label>
<br><br>

<div class="hideme" id="label-ck1">Label bound to checkbox1</div>
<div class="hideme" id="label-ck2">Label bound to checkbox2</div>

How to hide one div and show another div using button onclick?

1) Inside onclick, you don't have to use "javascript:", that is implied.

2) You check for "display: block", I always check for "display: none" (Because the display can also be "inline-block", etc.)

Try this:

function switchVisible() {            if (document.getElementById('Div1')) {
                if (document.getElementById('Div1').style.display == 'none') {                    document.getElementById('Div1').style.display = 'block';                    document.getElementById('Div2').style.display = 'none';                }                else {                    document.getElementById('Div1').style.display = 'none';                    document.getElementById('Div2').style.display = 'block';                }            }}

#Div2 {  display: none;}

<div id="Div1">Div 1</div><div id="Div2">Div 2</div>
<input id="Button1" type="button" value="Click" onclick="switchVisible();"/>

Show/hide 'div' using JavaScript

How to show or hide an element:

In order to show or hide an element, manipulate the element's style property. In most cases, you probably just want to change the element's display property:

element.style.display = 'none';           // Hide
element.style.display = 'block';          // Show
element.style.display = 'inline';         // Show
element.style.display = 'inline-block';   // Show

Alternatively, if you would still like the element to occupy space (like if you were to hide a table cell), you could change the element's visibility property instead:

element.style.visibility = 'hidden';      // Hide
element.style.visibility = 'visible';     // Show

Hiding a collection of elements:

If you want to hide a collection of elements, just iterate over each element and change the element's display to none:

function hide (elements) {
  elements = elements.length ? elements : [elements];
  for (var index = 0; index < elements.length; index++) {
    elements[index].style.display = 'none';
  }
}

// Usage:
hide(document.querySelectorAll('.target'));
hide(document.querySelector('.target'));
hide(document.getElementById('target'));

hide(document.querySelectorAll('.target'));
function hide (elements) {  elements = elements.length ? elements : [elements];  for (var index = 0; index < elements.length; index++) {    elements[index].style.display = 'none';  }}

<div class="target">This div will be hidden.</div>
<span class="target">This span will be hidden as well.</span>

---

Related Topics