How to toggle a button in jQuery on click event

Question

Sorry if this beginner question, but I have some jQuery to Hide fields in SharePoint that works fine but now I am wanting to toggle (hide/show) when the user clicks a button. I feel like I am close but can't get the syntax right.

I am pretty certain it is the $("input[toggleButton]).click(function() that I am messing up. Any thoughts would be great.

<style type="text/css">
#toggleButton {
margin-top:10px;
padding-right:20px;
text-align:right;
}
</style>

<br/>

<input type="button" class="toggleButton" value="Show/Hide All Fields" id="toggleButton">


<script>
$(document).ready(function()
{
$("input[toggleButton]).click(function()

{
$("nobr:contains('Approved By')").parent('h3').parent('td').parent('tr').toggle();
$("nobr:contains('Assigned To:')").parent('h3').parent('td').parent('tr').toggle();
$("nobr:contains('Request Status')").parent('h3').parent('td').parent('tr').toggle();
});
});

</script>

A double quote is missing in your example. Just in case you didn't notice it... — AymKdn
– AymKdn, Commented Jul 31, 2013 at 18:28

Stano · Accepted Answer · 2013-07-30 22:56:17Z

1

Use

$(".toggleButton").click(function(){
    ...
});

edited Jul 30, 2013 at 22:56

Stano

8,9796 gold badges33 silver badges46 bronze badges

answered Jul 30, 2013 at 22:34

Wilson

5108 silver badges8 bronze badges

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

1 Comment

ahdrum87 Over a year ago

This works very well thanks, is there a property that will set these to hide by default. I had attempted "false" with no luck. Thanks!

AGDM · Accepted Answer · 2013-07-30 22:39:34Z

1

I am calling #toggleButton directly in $().

http://jsfiddle.net/agdm/fQhDh/1/

$(document).ready(function () {
  $('#toggleButton').click(function() {
    $("td:contains('Approved By')").parent().toggle();
    $("td:contains('Assigned To')").parent().toggle();
    $("td:contains('Request Status')").parent().toggle();
  });
});

Also as per: http://reference.sitepoint.com/html/nobr

"The nobr element has good support in modern browsers (for backwards-compatibility reasons) but should not be used."

answered Jul 30, 2013 at 22:39

AGDM

1041 silver badge6 bronze badges

Comments

urbaindepuce · Accepted Answer · 2013-07-31 11:49:45Z

When selecting an element with jQuery you use CSS selectors. When using an element name and square brackets like you did, you are using an attribute selector. It looks like this for example:

$("a[title]"); // Select all <a> elements with the title attribute set to whatever value 
$("a[title=foobar]"); // Select all <a> elements with the title attribute set to "foobar"

The button you defined in markup has a class name and an ID set. Because selecting by a class name could return multiple elements I would go with the ID because its always unique. You can select elements by ID by using "#" like this:

$("#id"); // Will return only one element

You can select elements of a given class by using "." like this:

$(".className"); // Could return multiple elements

This document explains the use of selectors in CSS: http://www.w3.org/TR/CSS2/selector.html

I don't think that your event handler for the button click event is called, because the selector seems to be wrong. This one should work for you:

$(document).ready(function() {

    $("#toggleButton").click(function() {
        // Do something
    });

});

Collectives™ on Stack Overflow

How to toggle a button in jQuery on click event

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related