How to hide a <div> conditionally?

1

I need one of these divs to be hidden and one to be visible depending on a value from a drop-down selector.

<div id="selections" class="row mapSlider">
       
      //a slider and some buttons

    </div>

 <div id="selections" class="row areaSlider">        
         //a slider and some buttons
      </div>

When I try to create a function that sets the visibility style of the div to hidden, I get an error msg saying, “Cannot set property ‘visibility’ of undefined” but I don’t see why it would be undefined?

function hideOneSlider() {

  console.log($("#indicatorType").val());

  console.log($("#mapSlider").style);

  if ($("#indicatorType").val() === "AccAndAgent") {

    $("#mapSlider").style.visibility = "hidden";

  }

}

Any idea what I’m doing wrong?

Thanks!

2

Hello there.

Have you called, $(document).ready()? If not, perhaps the function is being called before the elements are being created.

Hope this helps

3

hey @sabbyiqbal,try this code,

<!doctype html>
<html>
<head>
<script type="text/javascript">
function hideDiv(elem) {
    if(elem.value == "Mac")
	document.getElementById('hideDiv').style.display = "none";
    else
        document.getElementById('hideDiv').style.display = 'block';
}
</script>
</head>
<body>
<select class="form-control input-lg" onchange="hideDiv(this)" name="category">
  <option value="Iphone">Iphone</option>
  <option value="Mac">Mac</option>
</select>

<div id="hideDiv" class="form-group">
  <label class="" for="Name">Name</label>
  <input type="text"/>
</div>
</body>
</html>

hope this helps!

4

if(condition here)
document.getElementById(“divid”).style.visibility = “hidden”;

5

Hello sabbyiqbal,

It seems that both of your divs have the same id: selections. Then in your if statement, you are trying to access an element with the id “mapSlider”. “mapSlider” is set as the class on your div, not the id.

1 Like
6

Thanks for all the inputs!

I made some updates that combined some of these answers:
First, I set the default CSS properties upfront in CSS file:

.areaSlider {
  visibility: visible;
}

.mapSlider {
  visibility: hidden;
}

Then I added to code I already had that checks for changes in #indicatorType:

$("#indicatorType").change(function() {
//a bunch of code to which I added the following:
    if ($("#indicatorType").val() === "MFmapDistrict" || "MFmapProvince") {
      $(".mapSlider")[0].style.visibility = "visible";
      $(".areaSlider")[0].style.visibility = "hidden";
      console.log("Hiding area slider");
    } else {
      $(".mapSlider")[0].style.visibility = "hidden";
      $(".areaSlider")[0].style.visibility = "visible";
      console.log("Hiding map slider");
    }

}

The key here was that I needed to set visibility property of $(".mapSlider")[0].style not $(".mapSlider").style since I am using a class selector not id selector.

Now I’m running into a new problem which I may be back to ask help for but this issue can be closed. Yay.

7

Just to be clear. It is not because it’s a class selector, it’s because of how jQuery works.

The $('selector') always returns a jQuery object. If you want to get to the element to use native methods or directly access properties on it you have to index to it.

<div id="test">test</div>

<div class="test">test</div>
<div class="test">test</div>

const jqueryElementId = $('#test');
const jqueryElementClass = $('.test');

console.log(jqueryElementId)

/*

k.fn.init [div#test]
0: div#test
length: 1
__proto__: Object(0)

*/

console.log(jqueryElementClass)

/*
k.fn.init(2) [div.test, div.test, prevObject: k.fn.init(1)]
0: div.test
1: div.test
length: 2
prevObject: k.fn.init [document]
__proto__: Object(0)
*/

If you are going to use jQuery you might as well use the methods it comes with, like .css().

It also has an Effects Category with methods for hiding/showing, with or without animations.

1 Like
8

Hello

The way to do it with CSS is:

#yourdiv {

visibility: hidden;

}

Depends on what the condition is. If you want to hide the element when it’s empty, look at the CSS :empty pseudoclass in conjunction with display: none.

.collapsible:empty {

display: none;

}

I hope this will help you