I have a page with a bunch of fields. I want to put a little edit button next to them. There will probably be a dozen or so. However, I don't want them there the entire time. I would like some sort of "Toggle Edit" button that would show/hide all the individual edit buttons. I've found some js to modify the style of an individual element using "GetElementByID" or "GetElementsByName" or whatever, but what I actually want to do is change the STYLE. For instance, I might have 15 divs with a class of "Edit" applied and Display: none. When someone clicks "Toggle Edit" I want to change "Edit" to Display: inline.
Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.
I think you're on the right track.
I would use jQuery just to make life easier, if you are not already using it on the site it would be as simple as including the file inside the <head>.
Then, to do what you are talking about you should be able to do something like this:
<style type="text/css"> .MyClass {display:none;} .MyNEWClass {display:block;}</style><script type="text/javascript"> function changeClass() { // this adds the class MyNEWClass to the elements with a class of .MyClass $('.MyClass').addClass('MyNEWClass'); } // this is just a click listener, it does not need to look exactly like this $(':button:contains(A Button)').click(changeClass);</script><!-- button to show or hide the edit buttons --><button>A Button</button><!-- edit buttons to show or hide --><div class="MyClass">Edit Buttons</div><div class="MyClass">Edit Buttons</div><div class="MyClass">Edit Buttons</div>
You can add multiple classes, styles overwrite each other in order. You could use the removeClass() call but if you remove the class you are searching by then you will get stuck. It might be better to start your elements out with two classes, use one to "search" by and one to remove or add. (to give an element more than one class just separate the classes with a space like this <div class="ClassOne ClassTwo"></div>)
You could also make use of these to accomplish the same outcome:
$('.MyClass').removeClass('MyNEWClass');
$('.MyClass').toggleClass('MyClass');
I like the JQuery idea and I am using it for other stuff, but I'm not very good with javascript at all. Right now I have a checkbox that I'm trying to use as the toggle.
How would I modify your example of the "button" click listener to make it work with a check box? Also, does this method require a postback or would it render the client side changes immediately?
You could have jQuery on the page like this which would immediately make changes to the client's page without needing to do a postback:
$(document).ready(function()
{
//Add javascript click event handler to CheckBox1
$('#CheckBox1').click(function()
{
//Change all elements using 'Edit' class to 'display: none' or 'display: inline' based on check state
$('.Edit').('display', this.checked ? 'inline' : 'none');
});
});
There are several ways/variations to accomplish this task using jQuery. Others have listed corrected ways of doing it as well.
Okay I'm having trouble following all of this and putting it together and getting it to work. I have attached the JS, asp/html and CSS. What am I missing? Also, does it require a postback or should it just do it immediately?
This one also didn't seem to work, but I like it best for it's simplicity:
$(document).ready(function()
{
//Add javascript click event handler to CheckBox1
$('#CheckBox1').click(function()
{
//Change all elements using 'Edit' class to 'display: none' or 'display: inline' based on check state
$('.Edit').('display', this.checked ? 'inline' : 'none');
});
});
gurvinder372: "not sure if CheckBox1 is the correct id of the checkbox, please check the same in view source"
Yes, didn't think about this possibility. If you are using a master/content page setup, then controls on your content pages will have big prefixes on their ID's looking something like this:
ctl00_ContentPlaceHolder1_CheckBox1
Which would cause the javascript to fail.
A work around for this would be changing the $('#CheckBox1') to $('[id*="CheckBox1"]')
var element = document.getElementById("e
element.style.display = "none"; //or block