0

What I'm trying to accomplish is a button that opens and closes a div.

The part of my code that I believe is causing this to fail is the true-false statement: if the visibility is block; if the visibility is hidden (my if/else-if statement conditions). How should I select an attribute of my HTML document from my condition statement, to check whether or not the element-state is such?

http://jsbin.com/ubuWUPe/1/edit

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>


<!-- block 1 -->
<script type="text/javascript">
  function open_div_() {
        if ( $("#_div__field").style.display = "none"; )
        {
            document.getElementById('_div__field').style.display = "block";
        }
        else if 
        ( $("#_div__field").style.display = "block"; )
        {
            document.getElementById('_div__field').style.display = "none";
        }
    }
</script>
<!-- block 1 end -->

<meta charset=utf-8 />
<meta name="viewport" content="width=device-width">      
</head>

<body>

<!-- block 2 -->
  <div id="_div__field" style="display:none;">
        YAY!
  </div>

  <div id="_div__button">
        <input type="button" name="answer" value="Show" onclick="open_div_()"></button>
  </div>
<!-- block 2 end -->

</body>
</html>
Wolfpack'08
  • 3,982
  • 11
  • 46
  • 78

1 Answers1

1

One of the ways :

$("#_div__field").is(":visible")

How do I check if an element is hidden in jQuery?

How much did you search before posting? I was able to find a few posts regarding this on SO itself.

Community
  • 1
  • 1
crafter
  • 6,246
  • 1
  • 34
  • 46
  • crafter: can you please include additional examples of checking attributes, so that the question is more generally applicable? For example, to check whether or not the background color is blue, do you write `$("#_div__background").is(":blue")`? – Wolfpack'08 Dec 03 '13 at 05:39
  • Use the css() function. for example : $(element).css('background') == 'blue' – crafter Dec 03 '13 at 05:44
  • For example `$("#_div__background").css('background') == 'blue'`? – Wolfpack'08 Dec 03 '13 at 06:04
  • Do you prefer this method: http://stackoverflow.com/questions/3582619/how-to-change-css-display-none-or-block-property-using-jquery ? – Wolfpack'08 Dec 03 '13 at 06:09
  • So, can you explain how this fails: `if ( $("#_div__field").css('style.display') == 'none'; ){document.getElementById('_div__field').style.display = "block";}` – Wolfpack'08 Dec 03 '13 at 06:15
  • 1
    $("#_div__field").css('display'), not $("#_div__field").css('style.display') – crafter Dec 03 '13 at 07:23
  • crafter: that makes a lot of sense to me because `.css` indicates the style attribute, correct? I wish they just used attribute names, like .style. – Wolfpack'08 Dec 03 '13 at 09:23
  • crafter: I think it's better to use that in the answer itself because `.is`, by itself, doesn't include information on how to or whether-or-not the `div` is set to `visible`, right? – Wolfpack'08 Dec 03 '13 at 09:25