Toggle CSS values using Javascript


I'm trying to modify the behavior of some web parts in Sharepoint (thus forcing IE down my throat) for our users who use the Project server pages. I'm not really the best JavaScript guy, and this is driving me nuts.

On one webpart to display the work from Project, there is a subrow 'Planned' shown below the actual data entry row that clutters the view. We want to turn the 'Planned' row off.

I can do it with a simple three liner like this:

<style type="text/css"> .XmlGridPlannedWork {display:none;} </style>

But the users want to toggle the lines on and off. So I thought I'd try reading then writting the current CSS value like so:

<script type="text/javascript"> function toggle_PlannedLine() var ObjPlanned = Document.getElementById("tr").getElementsByTagName("XmlGridPlannedWork"); for(var i=0;i<ObjPlanned.length;i++) { if (OjbPlanned[i].display != "none") { // toggle the 'Planned' line off ObjPlanned[i].style.display = "none"; } else { // toggle the 'Planned' line on ObjPlanned[i].style.display = "inline"; } } return; } </script> <button onClick="toggle_PlannedLine();">Toggle Planned Line</button>

The actual segment I'm targeting looks like this:

<tr class="XmlGridPlannedWork" RowID="694810f9-e922-4321-9236-e495dd5048d9B" ID="GridDataRow">

Of course, when you click the button, the rows don't disappear. At this point, I'm pretty sure I'm missing something obvious, but like I mentioned, I'm no JavaScript guru.


<strong>Easiest Solution</strong>

Ok, so my answer below should help you out, but here is another way to approach it that is much simpler:


<style type="text/css"> .XmlGridPlannedWork {display:none;} body.showPlanned .XmlGridPlannedWork { display: block} </style>


<script type="text/javascript"> function toggle_PlannedLine() { if(document.body.className.match(/\bshowPlanned\b/) > -1) document.body.className = document.body.className.replace(/\bshowPlanned\b/,''); else document.body.className += " showPlanned"; } </script> <button onClick="toggle_PlannedLine();">Toggle Planned Line</button>

<strong>Original Answer</strong>

You were really close in the concepts you wanted, but as the other answers point out a number of things were missing. I rewrote your function to work cross browser, and please ask if you have any questions about it:

<script type="text/javascript"> function toggle_PlannedLine() { var objs = []; if( document.querySelector){ objs = document.querySelectorAll('tr.XmlGridPlannedWork'); } else if (document.getElementsByClassName) { objs = document.getElementsByClassName('XmlGridPlannedWork'); } else { var temp = document.getElementsByTagName('tr'); for(var j = 0; j < temp.length; j++){ if(temp[j].className.match(/\bXmlGridPlannedWork\b/) > -1){ objs.push(temp[j]); } } } for(var i=0;i<objs.length;i++) { if (objs[i].style.display != "none") { // toggle the 'Planned' line off objs[i].style.display = "none"; } else { // toggle the 'Planned' line on objs[i].style.display = "inline"; } } } </script> <button onClick="toggle_PlannedLine();">Toggle Planned Line</button>

For those arguing that jQuery is not a valid answer, please take the following code as an example of why jQuery is so easy to use. All of the previous code is summed up like this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" charset="utf-8"> $(function(){ $('button.toggle').click(function(){ $("tr.XmlGridPlannedWork").toggle(); }) }) </script> <button class="toggle">Toggle Planned Line</button>


You forgot the opening brace for your function.

You are using getElementByTagName incorrectly. This function gets elements that match based on tag name (a, img, etc.) not CSS class. You can use jquery to accomplish what you want, or you can enumerate through every element on the page until you find the one you want. There are some open-source implementations of this available online. Your best bet, though, would be to add an id to the tag you care about, and then use getElementById.

Finally, Document should be document, and JavaScript <em>is</em> case sensitive.

Hope this helps!


document.getElementsByTagName looks for elements based on the name of their HTML tag, not their class attribute. Newer (not IE) browsers have support for document.getElementsByClassName(), and there are open source functions that do the same thing, falling back on the browser-native versions where available. This function will return a NodeList containing all the elements that use that class, and you can access each element and hide it through that list.


First, document should be lowercase in your var ObjPlanned declaration. Second, getElementById returns an element based on a unique ID and you're passing it the element, or tag, name. getElementsByTagName returns an array of elements matching a certain tag but you're passing it a className. There is no 'getElementsByClassName' built in to JavaScript, but you can easily use Google to find a solution.


Use <a href="http://jquery.com/" rel="nofollow">jQuery</a>. It provides a very useful <a href="http://docs.jquery.com/CSS/css" rel="nofollow">$.css()</a> method, which does what you're looking for in a very simple fashion.


  • read the following link [closed]
  • JTextPane shows color different from browser of an HTML
  • VBA(?) How to extract filename of images linked and inserted - Word 2013
  • my Android ContentProvider can't find ContentResolver
  • Delete rows matching substring with LIKE?
  • Can sklearn DecisionTreeClassifier truly work with categorical data?
  • How can you use last_insert_rowid to insert multiple rows?
  • Bundled scripts not working MVC
  • How to read a certificate from a USB token in C#
  • What is the use of the SHT_NULL section in ELF?
  • css Star-rating html
  • Jquery Show & ScrollTop (or ScrollTo)
  • CSS: How to fix overlapping divs
  • How to align an image side by side with a heading element?
  • Change navbar in bootstrap if user login
  • Creating My Symmetric Key in C#
  • Android Chronometer starts and stops but carries on counting when stopped
  • Send data from edittext to listview
  • Jquery Mobile pageLoading() Method how does it work?
  • Simulate click Geckofx vb,net
  • How to change the font size of a single index for UISegmentedControl?
  • Android fill_parent issue
  • Using $this when not in object context
  • How do I fake an specific browser client when using Java's Net library?
  • How reduce the height of an mschart by breaking up the y-axis
  • Perl system calls when running as another user using sudo
  • Can I have the cursor start on a particular column by default in jqgrid's edit mode?
  • jquery mobile loadPage not working
  • Properly structure and highlight a GtkPopoverMenu using PyGObject
  • Unanticipated behavior
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • Java static initializers and reflection
  • unknown Exception android
  • Django query for large number of relationships
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • Observable and ngFor in Angular 2
  • How can I use `wmic` in a Windows PE script?
  • failed to connect to specific WiFi in android programmatically
  • Unable to use reactive element in my shiny app
  • How to push additional view controllers onto NavigationController but keep the TabBar?