conditional display of html element forms











up vote
8
down vote

favorite
2












Well, after a one hour introduction to javascript, I ve come up with the following code. It did what I wanted alright, but then I wanted something else and it wont work.



I wanted that upon clicking on a button, a certain field would hide and on clicking on another yes, another one would hide too, BUT, of course, it had to make the other show, otherwise we would end up with nothing and the purpose was to present different fields depending on what the user clicked (on a radio button) So in a childish way I made my code and it worked. But then it came to me that I wanted first to have boths fields hidden instead of both fields shown, and here is the issue. I added a 0 value to the parameter of the function "telling it" that when x = 0, then visibility = hidden. But it wont listen to me!, So, the part of the code when it says x = 1 and 2 works, the one about 0, does not.



It is such a simple code that can make someone smile, but heck, it was clean and it worked. Does anyone know how to have the fields hidden before clicking on the buttons ?



Thanks a lot I remove some tags of the HTML



<html>
<head>
<script language="javascript">
var x = 0;

function hola(x) {
if(x == 0) {
document.getElementById("cont1").style.visibility="hidden";
document.getElementById("cont2").style.visibility="hidden";
}

if(x == 1) {
document.getElementById("cont1").style.visibility="visible";
document.getElementById("cont2").style.visibility="hidden";
}

if(x == 2) {
document.getElementById("cont1").style.visibility="hidden";
document.getElementById("cont2").style.visibility="visible";
}
}
</script>
</head>

<body>
<input type="button" onclick="hola(1)" value="hidefield2" id="boton1">
<div id="cont1">
<input type="text">
</div>

<input type="button" onclick="hola(2)" value="hidefield1" id="boton2">

<div id="cont2">
<input type="text">
</div>
</body>
<html>









share|improve this question
























  • Don't you think you should actually call the function with 0 as a parameter at some point?
    – Pointy
    Oct 18 '10 at 17:09










  • Hello,thank you for taking the time to glance at my question. As per your comment, I think I have done that right at the start, I have put x = 0, but now that you say it, I am coming to think that that variable has no power to cross the line of the start of the function, that is, the function may be unaware of the assigment of 0 to x lines above. Therefore, if the default is naturally, visibility visible, that is why and since there was no further assigment then it stays. Then the explanation to the behaviour must probably that the X value = 0 declared prior to the function is not global.
    – Alvaro
    Oct 19 '10 at 10:27















up vote
8
down vote

favorite
2












Well, after a one hour introduction to javascript, I ve come up with the following code. It did what I wanted alright, but then I wanted something else and it wont work.



I wanted that upon clicking on a button, a certain field would hide and on clicking on another yes, another one would hide too, BUT, of course, it had to make the other show, otherwise we would end up with nothing and the purpose was to present different fields depending on what the user clicked (on a radio button) So in a childish way I made my code and it worked. But then it came to me that I wanted first to have boths fields hidden instead of both fields shown, and here is the issue. I added a 0 value to the parameter of the function "telling it" that when x = 0, then visibility = hidden. But it wont listen to me!, So, the part of the code when it says x = 1 and 2 works, the one about 0, does not.



It is such a simple code that can make someone smile, but heck, it was clean and it worked. Does anyone know how to have the fields hidden before clicking on the buttons ?



Thanks a lot I remove some tags of the HTML



<html>
<head>
<script language="javascript">
var x = 0;

function hola(x) {
if(x == 0) {
document.getElementById("cont1").style.visibility="hidden";
document.getElementById("cont2").style.visibility="hidden";
}

if(x == 1) {
document.getElementById("cont1").style.visibility="visible";
document.getElementById("cont2").style.visibility="hidden";
}

if(x == 2) {
document.getElementById("cont1").style.visibility="hidden";
document.getElementById("cont2").style.visibility="visible";
}
}
</script>
</head>

<body>
<input type="button" onclick="hola(1)" value="hidefield2" id="boton1">
<div id="cont1">
<input type="text">
</div>

<input type="button" onclick="hola(2)" value="hidefield1" id="boton2">

<div id="cont2">
<input type="text">
</div>
</body>
<html>









share|improve this question
























  • Don't you think you should actually call the function with 0 as a parameter at some point?
    – Pointy
    Oct 18 '10 at 17:09










  • Hello,thank you for taking the time to glance at my question. As per your comment, I think I have done that right at the start, I have put x = 0, but now that you say it, I am coming to think that that variable has no power to cross the line of the start of the function, that is, the function may be unaware of the assigment of 0 to x lines above. Therefore, if the default is naturally, visibility visible, that is why and since there was no further assigment then it stays. Then the explanation to the behaviour must probably that the X value = 0 declared prior to the function is not global.
    – Alvaro
    Oct 19 '10 at 10:27













up vote
8
down vote

favorite
2









up vote
8
down vote

favorite
2






2





Well, after a one hour introduction to javascript, I ve come up with the following code. It did what I wanted alright, but then I wanted something else and it wont work.



I wanted that upon clicking on a button, a certain field would hide and on clicking on another yes, another one would hide too, BUT, of course, it had to make the other show, otherwise we would end up with nothing and the purpose was to present different fields depending on what the user clicked (on a radio button) So in a childish way I made my code and it worked. But then it came to me that I wanted first to have boths fields hidden instead of both fields shown, and here is the issue. I added a 0 value to the parameter of the function "telling it" that when x = 0, then visibility = hidden. But it wont listen to me!, So, the part of the code when it says x = 1 and 2 works, the one about 0, does not.



It is such a simple code that can make someone smile, but heck, it was clean and it worked. Does anyone know how to have the fields hidden before clicking on the buttons ?



Thanks a lot I remove some tags of the HTML



<html>
<head>
<script language="javascript">
var x = 0;

function hola(x) {
if(x == 0) {
document.getElementById("cont1").style.visibility="hidden";
document.getElementById("cont2").style.visibility="hidden";
}

if(x == 1) {
document.getElementById("cont1").style.visibility="visible";
document.getElementById("cont2").style.visibility="hidden";
}

if(x == 2) {
document.getElementById("cont1").style.visibility="hidden";
document.getElementById("cont2").style.visibility="visible";
}
}
</script>
</head>

<body>
<input type="button" onclick="hola(1)" value="hidefield2" id="boton1">
<div id="cont1">
<input type="text">
</div>

<input type="button" onclick="hola(2)" value="hidefield1" id="boton2">

<div id="cont2">
<input type="text">
</div>
</body>
<html>









share|improve this question















Well, after a one hour introduction to javascript, I ve come up with the following code. It did what I wanted alright, but then I wanted something else and it wont work.



I wanted that upon clicking on a button, a certain field would hide and on clicking on another yes, another one would hide too, BUT, of course, it had to make the other show, otherwise we would end up with nothing and the purpose was to present different fields depending on what the user clicked (on a radio button) So in a childish way I made my code and it worked. But then it came to me that I wanted first to have boths fields hidden instead of both fields shown, and here is the issue. I added a 0 value to the parameter of the function "telling it" that when x = 0, then visibility = hidden. But it wont listen to me!, So, the part of the code when it says x = 1 and 2 works, the one about 0, does not.



It is such a simple code that can make someone smile, but heck, it was clean and it worked. Does anyone know how to have the fields hidden before clicking on the buttons ?



Thanks a lot I remove some tags of the HTML



<html>
<head>
<script language="javascript">
var x = 0;

function hola(x) {
if(x == 0) {
document.getElementById("cont1").style.visibility="hidden";
document.getElementById("cont2").style.visibility="hidden";
}

if(x == 1) {
document.getElementById("cont1").style.visibility="visible";
document.getElementById("cont2").style.visibility="hidden";
}

if(x == 2) {
document.getElementById("cont1").style.visibility="hidden";
document.getElementById("cont2").style.visibility="visible";
}
}
</script>
</head>

<body>
<input type="button" onclick="hola(1)" value="hidefield2" id="boton1">
<div id="cont1">
<input type="text">
</div>

<input type="button" onclick="hola(2)" value="hidefield1" id="boton2">

<div id="cont2">
<input type="text">
</div>
</body>
<html>






javascript conditional visibility






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Oct 18 '10 at 17:05









Gabriel McAdams

41.6k105375




41.6k105375










asked Oct 18 '10 at 16:58









Alvaro

932211




932211












  • Don't you think you should actually call the function with 0 as a parameter at some point?
    – Pointy
    Oct 18 '10 at 17:09










  • Hello,thank you for taking the time to glance at my question. As per your comment, I think I have done that right at the start, I have put x = 0, but now that you say it, I am coming to think that that variable has no power to cross the line of the start of the function, that is, the function may be unaware of the assigment of 0 to x lines above. Therefore, if the default is naturally, visibility visible, that is why and since there was no further assigment then it stays. Then the explanation to the behaviour must probably that the X value = 0 declared prior to the function is not global.
    – Alvaro
    Oct 19 '10 at 10:27


















  • Don't you think you should actually call the function with 0 as a parameter at some point?
    – Pointy
    Oct 18 '10 at 17:09










  • Hello,thank you for taking the time to glance at my question. As per your comment, I think I have done that right at the start, I have put x = 0, but now that you say it, I am coming to think that that variable has no power to cross the line of the start of the function, that is, the function may be unaware of the assigment of 0 to x lines above. Therefore, if the default is naturally, visibility visible, that is why and since there was no further assigment then it stays. Then the explanation to the behaviour must probably that the X value = 0 declared prior to the function is not global.
    – Alvaro
    Oct 19 '10 at 10:27
















Don't you think you should actually call the function with 0 as a parameter at some point?
– Pointy
Oct 18 '10 at 17:09




Don't you think you should actually call the function with 0 as a parameter at some point?
– Pointy
Oct 18 '10 at 17:09












Hello,thank you for taking the time to glance at my question. As per your comment, I think I have done that right at the start, I have put x = 0, but now that you say it, I am coming to think that that variable has no power to cross the line of the start of the function, that is, the function may be unaware of the assigment of 0 to x lines above. Therefore, if the default is naturally, visibility visible, that is why and since there was no further assigment then it stays. Then the explanation to the behaviour must probably that the X value = 0 declared prior to the function is not global.
– Alvaro
Oct 19 '10 at 10:27




Hello,thank you for taking the time to glance at my question. As per your comment, I think I have done that right at the start, I have put x = 0, but now that you say it, I am coming to think that that variable has no power to cross the line of the start of the function, that is, the function may be unaware of the assigment of 0 to x lines above. Therefore, if the default is naturally, visibility visible, that is why and since there was no further assigment then it stays. Then the explanation to the behaviour must probably that the X value = 0 declared prior to the function is not global.
– Alvaro
Oct 19 '10 at 10:27












3 Answers
3






active

oldest

votes

















up vote
7
down vote



accepted










What worked:

You had two buttons, both visible in the beginning. And on click of one button, you hid a div, and made another visible.



Now you need a situation when the divs should be hidden in the beginning, and then show when you click a button.



By default, for all elements where a explicit visibility attribute is not given, visibility is considered to be visible.



To make the button invisible, you need to add visibility:hidden to the button.



You can do it two ways:




  1. in the code for the divs, make then "invisible by default" by adding
    style='visibility:hidden'.



  2. Add another javascript function that is called on load of the page, and makes both the divs invisible:



    function hideBoth()  
    {
    document.getElementById("cont1").style.visibility="hidden";
    document.getElementById("cont2").style.visibility="hidden" ;
    }



Call it on load of your page: <body onload='hideBoth()'>






share|improve this answer





















  • Thank you to both commenters: My conclusions after having worked with your proposals are: 1) I think the reason of the problem that the assigment of x = 0 would not work despite clearly existing a call to that is that the X was placed outside above before the beginning of the function. 2) If I hardcoded inline the visibility hidden in the html tag, although it did hide it, it would not show upon clicking on the buttons. 3) Finally, the onload call to the function from the body and the adding of the hideboth function did the trick. Thank you very much. Alvaro
    – Alvaro
    Oct 19 '10 at 10:37




















up vote
3
down vote













This line:



document.getElementById("cont1").style.visibility="hidden";


Adds this:



style="visibility: hidden;"


to this:



<div id="cont1">


to make it look like this:



<div id="cont1" style="visibility: hidden;">


You can do this yourself, just by adding that attribute to your html tag.





Oh yeah, and this:



<div id="cont1">


is the same as this:



<div id="cont1" style="visibility: visible;">





share|improve this answer




























    up vote
    0
    down vote













    You can use jquery to also do this! Here is an example which basically takes the input of your CSS and makes it visible or not:



    function checkPrerequisites() {
    // The 4th line makes objects visible in the for loop.
    // Determines if pre-requisites are met and if so - makes div draggable
    // for new courses

    for (var i = 0; i < courselist.length; i++) {
    if (prerequisitesMet(i)) {
    $('#' + i.toString()).css("background-color", "lightgreen");
    $('#' + i.toString()).css("visibility", "visible");
    $('#' + i.toString()).draggable();
    }
    }
    }





    share|improve this answer





















      Your Answer






      StackExchange.ifUsing("editor", function () {
      StackExchange.using("externalEditor", function () {
      StackExchange.using("snippets", function () {
      StackExchange.snippets.init();
      });
      });
      }, "code-snippets");

      StackExchange.ready(function() {
      var channelOptions = {
      tags: "".split(" "),
      id: "1"
      };
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function() {
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled) {
      StackExchange.using("snippets", function() {
      createEditor();
      });
      }
      else {
      createEditor();
      }
      });

      function createEditor() {
      StackExchange.prepareEditor({
      heartbeatType: 'answer',
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader: {
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      },
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      });


      }
      });














      draft saved

      draft discarded


















      StackExchange.ready(
      function () {
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f3961422%2fconditional-display-of-html-element-forms%23new-answer', 'question_page');
      }
      );

      Post as a guest















      Required, but never shown

























      3 Answers
      3






      active

      oldest

      votes








      3 Answers
      3






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes








      up vote
      7
      down vote



      accepted










      What worked:

      You had two buttons, both visible in the beginning. And on click of one button, you hid a div, and made another visible.



      Now you need a situation when the divs should be hidden in the beginning, and then show when you click a button.



      By default, for all elements where a explicit visibility attribute is not given, visibility is considered to be visible.



      To make the button invisible, you need to add visibility:hidden to the button.



      You can do it two ways:




      1. in the code for the divs, make then "invisible by default" by adding
        style='visibility:hidden'.



      2. Add another javascript function that is called on load of the page, and makes both the divs invisible:



        function hideBoth()  
        {
        document.getElementById("cont1").style.visibility="hidden";
        document.getElementById("cont2").style.visibility="hidden" ;
        }



      Call it on load of your page: <body onload='hideBoth()'>






      share|improve this answer





















      • Thank you to both commenters: My conclusions after having worked with your proposals are: 1) I think the reason of the problem that the assigment of x = 0 would not work despite clearly existing a call to that is that the X was placed outside above before the beginning of the function. 2) If I hardcoded inline the visibility hidden in the html tag, although it did hide it, it would not show upon clicking on the buttons. 3) Finally, the onload call to the function from the body and the adding of the hideboth function did the trick. Thank you very much. Alvaro
        – Alvaro
        Oct 19 '10 at 10:37

















      up vote
      7
      down vote



      accepted










      What worked:

      You had two buttons, both visible in the beginning. And on click of one button, you hid a div, and made another visible.



      Now you need a situation when the divs should be hidden in the beginning, and then show when you click a button.



      By default, for all elements where a explicit visibility attribute is not given, visibility is considered to be visible.



      To make the button invisible, you need to add visibility:hidden to the button.



      You can do it two ways:




      1. in the code for the divs, make then "invisible by default" by adding
        style='visibility:hidden'.



      2. Add another javascript function that is called on load of the page, and makes both the divs invisible:



        function hideBoth()  
        {
        document.getElementById("cont1").style.visibility="hidden";
        document.getElementById("cont2").style.visibility="hidden" ;
        }



      Call it on load of your page: <body onload='hideBoth()'>






      share|improve this answer





















      • Thank you to both commenters: My conclusions after having worked with your proposals are: 1) I think the reason of the problem that the assigment of x = 0 would not work despite clearly existing a call to that is that the X was placed outside above before the beginning of the function. 2) If I hardcoded inline the visibility hidden in the html tag, although it did hide it, it would not show upon clicking on the buttons. 3) Finally, the onload call to the function from the body and the adding of the hideboth function did the trick. Thank you very much. Alvaro
        – Alvaro
        Oct 19 '10 at 10:37















      up vote
      7
      down vote



      accepted







      up vote
      7
      down vote



      accepted






      What worked:

      You had two buttons, both visible in the beginning. And on click of one button, you hid a div, and made another visible.



      Now you need a situation when the divs should be hidden in the beginning, and then show when you click a button.



      By default, for all elements where a explicit visibility attribute is not given, visibility is considered to be visible.



      To make the button invisible, you need to add visibility:hidden to the button.



      You can do it two ways:




      1. in the code for the divs, make then "invisible by default" by adding
        style='visibility:hidden'.



      2. Add another javascript function that is called on load of the page, and makes both the divs invisible:



        function hideBoth()  
        {
        document.getElementById("cont1").style.visibility="hidden";
        document.getElementById("cont2").style.visibility="hidden" ;
        }



      Call it on load of your page: <body onload='hideBoth()'>






      share|improve this answer












      What worked:

      You had two buttons, both visible in the beginning. And on click of one button, you hid a div, and made another visible.



      Now you need a situation when the divs should be hidden in the beginning, and then show when you click a button.



      By default, for all elements where a explicit visibility attribute is not given, visibility is considered to be visible.



      To make the button invisible, you need to add visibility:hidden to the button.



      You can do it two ways:




      1. in the code for the divs, make then "invisible by default" by adding
        style='visibility:hidden'.



      2. Add another javascript function that is called on load of the page, and makes both the divs invisible:



        function hideBoth()  
        {
        document.getElementById("cont1").style.visibility="hidden";
        document.getElementById("cont2").style.visibility="hidden" ;
        }



      Call it on load of your page: <body onload='hideBoth()'>







      share|improve this answer












      share|improve this answer



      share|improve this answer










      answered Oct 18 '10 at 17:26









      Nivas

      14.7k44470




      14.7k44470












      • Thank you to both commenters: My conclusions after having worked with your proposals are: 1) I think the reason of the problem that the assigment of x = 0 would not work despite clearly existing a call to that is that the X was placed outside above before the beginning of the function. 2) If I hardcoded inline the visibility hidden in the html tag, although it did hide it, it would not show upon clicking on the buttons. 3) Finally, the onload call to the function from the body and the adding of the hideboth function did the trick. Thank you very much. Alvaro
        – Alvaro
        Oct 19 '10 at 10:37




















      • Thank you to both commenters: My conclusions after having worked with your proposals are: 1) I think the reason of the problem that the assigment of x = 0 would not work despite clearly existing a call to that is that the X was placed outside above before the beginning of the function. 2) If I hardcoded inline the visibility hidden in the html tag, although it did hide it, it would not show upon clicking on the buttons. 3) Finally, the onload call to the function from the body and the adding of the hideboth function did the trick. Thank you very much. Alvaro
        – Alvaro
        Oct 19 '10 at 10:37


















      Thank you to both commenters: My conclusions after having worked with your proposals are: 1) I think the reason of the problem that the assigment of x = 0 would not work despite clearly existing a call to that is that the X was placed outside above before the beginning of the function. 2) If I hardcoded inline the visibility hidden in the html tag, although it did hide it, it would not show upon clicking on the buttons. 3) Finally, the onload call to the function from the body and the adding of the hideboth function did the trick. Thank you very much. Alvaro
      – Alvaro
      Oct 19 '10 at 10:37






      Thank you to both commenters: My conclusions after having worked with your proposals are: 1) I think the reason of the problem that the assigment of x = 0 would not work despite clearly existing a call to that is that the X was placed outside above before the beginning of the function. 2) If I hardcoded inline the visibility hidden in the html tag, although it did hide it, it would not show upon clicking on the buttons. 3) Finally, the onload call to the function from the body and the adding of the hideboth function did the trick. Thank you very much. Alvaro
      – Alvaro
      Oct 19 '10 at 10:37














      up vote
      3
      down vote













      This line:



      document.getElementById("cont1").style.visibility="hidden";


      Adds this:



      style="visibility: hidden;"


      to this:



      <div id="cont1">


      to make it look like this:



      <div id="cont1" style="visibility: hidden;">


      You can do this yourself, just by adding that attribute to your html tag.





      Oh yeah, and this:



      <div id="cont1">


      is the same as this:



      <div id="cont1" style="visibility: visible;">





      share|improve this answer

























        up vote
        3
        down vote













        This line:



        document.getElementById("cont1").style.visibility="hidden";


        Adds this:



        style="visibility: hidden;"


        to this:



        <div id="cont1">


        to make it look like this:



        <div id="cont1" style="visibility: hidden;">


        You can do this yourself, just by adding that attribute to your html tag.





        Oh yeah, and this:



        <div id="cont1">


        is the same as this:



        <div id="cont1" style="visibility: visible;">





        share|improve this answer























          up vote
          3
          down vote










          up vote
          3
          down vote









          This line:



          document.getElementById("cont1").style.visibility="hidden";


          Adds this:



          style="visibility: hidden;"


          to this:



          <div id="cont1">


          to make it look like this:



          <div id="cont1" style="visibility: hidden;">


          You can do this yourself, just by adding that attribute to your html tag.





          Oh yeah, and this:



          <div id="cont1">


          is the same as this:



          <div id="cont1" style="visibility: visible;">





          share|improve this answer












          This line:



          document.getElementById("cont1").style.visibility="hidden";


          Adds this:



          style="visibility: hidden;"


          to this:



          <div id="cont1">


          to make it look like this:



          <div id="cont1" style="visibility: hidden;">


          You can do this yourself, just by adding that attribute to your html tag.





          Oh yeah, and this:



          <div id="cont1">


          is the same as this:



          <div id="cont1" style="visibility: visible;">






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Oct 18 '10 at 17:08









          Gabriel McAdams

          41.6k105375




          41.6k105375






















              up vote
              0
              down vote













              You can use jquery to also do this! Here is an example which basically takes the input of your CSS and makes it visible or not:



              function checkPrerequisites() {
              // The 4th line makes objects visible in the for loop.
              // Determines if pre-requisites are met and if so - makes div draggable
              // for new courses

              for (var i = 0; i < courselist.length; i++) {
              if (prerequisitesMet(i)) {
              $('#' + i.toString()).css("background-color", "lightgreen");
              $('#' + i.toString()).css("visibility", "visible");
              $('#' + i.toString()).draggable();
              }
              }
              }





              share|improve this answer

























                up vote
                0
                down vote













                You can use jquery to also do this! Here is an example which basically takes the input of your CSS and makes it visible or not:



                function checkPrerequisites() {
                // The 4th line makes objects visible in the for loop.
                // Determines if pre-requisites are met and if so - makes div draggable
                // for new courses

                for (var i = 0; i < courselist.length; i++) {
                if (prerequisitesMet(i)) {
                $('#' + i.toString()).css("background-color", "lightgreen");
                $('#' + i.toString()).css("visibility", "visible");
                $('#' + i.toString()).draggable();
                }
                }
                }





                share|improve this answer























                  up vote
                  0
                  down vote










                  up vote
                  0
                  down vote









                  You can use jquery to also do this! Here is an example which basically takes the input of your CSS and makes it visible or not:



                  function checkPrerequisites() {
                  // The 4th line makes objects visible in the for loop.
                  // Determines if pre-requisites are met and if so - makes div draggable
                  // for new courses

                  for (var i = 0; i < courselist.length; i++) {
                  if (prerequisitesMet(i)) {
                  $('#' + i.toString()).css("background-color", "lightgreen");
                  $('#' + i.toString()).css("visibility", "visible");
                  $('#' + i.toString()).draggable();
                  }
                  }
                  }





                  share|improve this answer












                  You can use jquery to also do this! Here is an example which basically takes the input of your CSS and makes it visible or not:



                  function checkPrerequisites() {
                  // The 4th line makes objects visible in the for loop.
                  // Determines if pre-requisites are met and if so - makes div draggable
                  // for new courses

                  for (var i = 0; i < courselist.length; i++) {
                  if (prerequisitesMet(i)) {
                  $('#' + i.toString()).css("background-color", "lightgreen");
                  $('#' + i.toString()).css("visibility", "visible");
                  $('#' + i.toString()).draggable();
                  }
                  }
                  }






                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 12 at 0:13









                  Andrew Polemeni

                  15




                  15






























                      draft saved

                      draft discarded




















































                      Thanks for contributing an answer to Stack Overflow!


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.





                      Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


                      Please pay close attention to the following guidance:


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.




                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function () {
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f3961422%2fconditional-display-of-html-element-forms%23new-answer', 'question_page');
                      }
                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      Popular posts from this blog

                      Xamarin.iOS Cant Deploy on Iphone

                      Glorious Revolution

                      Dulmage-Mendelsohn matrix decomposition in Python