How to hide/show div based on variable using javascript

Question

I am trying to display a div based on the URL parameter. I have to use only html css and javascript. I got it working until the part where the div must be set to display none if the variable (parameter from URL) matches.

HTML

   <div id="cfiblinks">
     <div class="row">
       <div class="twelve columns">
         <ul class="nav-bar">
           <li>
             <a href="#" target="_blank">
               <span>Order Document Upload</span>
             </a>
           </li>
           <li>
             <a href="#" target="_blank">
               <span>Business Card History</span>
             </a>
           </li>
           <li>
             <a href="#" target="_blank">   
               <span>Material Inventory</span>
             </a>
           </li>
         </ul>
        </div>
     </div>
   </div>

Javascript

<script language="JavaScript">

    function getURLParameter(name) {
        return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[""])[1].replace(/\+/g, '%20'))||null
    }

    myvar = getURLParameter('UserGroupId');

    document.write('The url parameter is: ' + myvar +'       ');

    if (myvar == 10102) {
        document.write('The url parameter is: ' + myvar +'     ');
        document.getElementById('cfiblinks').style.visibility = 'visible';
    } else {
        document.write('The url parameter is not : ' + myvar +'      ');
        document.getElementById('cfiblinks').style.visibility = 'hidden';
    }


</script>

Any help would be greatly appreciated. I suspect something is wrong with the document.getElementById.

offtopic: i would suggest using console.log for debugging instead of document.write — lordvlad
– lordvlad, Commented May 7, 2014 at 15:02
your code does work for me on jsbin (jsbin.com/yejowixo/1/edit) maybe you should open the developer console (ctrl+shift+j on chrome, ctrl+shift+k on ff) and have a look what's happening. try running getURLParameter('UserGroupId') from the console — lordvlad
– lordvlad, Commented May 7, 2014 at 15:12
I guess the reason is that your code runs BEFORE the DOM tree is loaded. You would want to use jQuery or similar anyway; or at least place the script tag at the end of the document — Antti Haapala
– Antti Haapala, Commented May 7, 2014 at 15:20
interesting. that is very odd. In ff, i get the following errors: - Use of getUserData() or setUserData() is deprecated. Use WeakMap or element.dataset instead. - TypeError: document.getElementById(...) is null - An unbalanced tree was written using document.write() causing data from the network to be reparsed. For more information developer.mozilla.org/en/… — MythRaven
– MythRaven, Commented May 7, 2014 at 15:25
YESS!!!! I moved it to the end of the document and it works like a charm! Thank you for clarifying that antti.... +1 for all of yous. As soon as i figure out how! :p — MythRaven
– MythRaven, Commented May 7, 2014 at 15:28

bottens · Accepted Answer · 2014-05-07 14:53:55Z

2

You can set the display property using block or none.

document.getElementById('cfiblinks').style.display = 'block'; //Will show
document.getElementById('cfiblinks').style.display = 'none'; //Will hide

answered May 7, 2014 at 14:53

bottens

3,9121 gold badge15 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MythRaven Over a year ago

Thanks for the suggestion. I tried it with display instead of visibility but still did not get intended outcome

Jameem · Accepted Answer · 2014-05-07 14:57:33Z

1

Try this..

if (myvar == 10102) {

    document.write('The url parameter is: ' + myvar +'     ');
    document.getElementById('cfiblinks').setAttribute("style", "display:block");

} else {
   document.write('The url parameter is not : ' + myvar +'      ');
   document.getElementById('cfiblinks').setAttribute("style", "display:none");
  }

edited May 7, 2014 at 14:57

answered May 7, 2014 at 14:51

Jameem

1,8383 gold badges15 silver badges26 bronze badges

3 Comments

MythRaven Over a year ago

Hello Jameem, Thanks for your response but it did not work. I still see the document.write methods working when my paramenter changes from 10102 to other, but the div is not changing display state. Is there anything else i have to ensure my html file includes?

Jameem Over a year ago

You must take the clientID of the div by inspecting the element?The ID changes on browser..

MythRaven Over a year ago

The ID is cfliblinks, even when i check with firebug in the browser. There are more divs nested within the div id="cfiblinks" but i dont think that should effect it.

capybaras · Accepted Answer · 2014-05-07 14:55:37Z

0

Try:

document.getElementById('something').style.display = "block";

and

document.getElementById('something').style.display = "none";

answered May 7, 2014 at 14:55

capybaras

1981 silver badge6 bronze badges

1 Comment

MythRaven Over a year ago

Thanks for the suggestion. I tried it with display instead of visibility but still did not get intended outcome

Collectives™ on Stack Overflow

How to hide/show div based on variable using javascript

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related