Skip to content
View in the app

A better way to browse. Learn more.

Tip.It Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Jquery / Multiple Buttons

Featured Replies

I am trying to manipulate a table with Jquery - hiding certain rows upon a button click.

 

The table itself has 6 different class values. One class will always be displayed. I want to be able to hide any or all of the other 5 classes, and any combinations of them. I need a separate labeled button for each class.

 

The tutorials I have found (such as this one: http://www.w3schools...uery_hide_class) all show examples of 1 button, which I have been able to make work on my table.

 

But I am unable to add any other buttons - I can't figure out how to distinguish between different buttons.

 

I have tried name and id with no success.

 

An example that isn't working:

 

 

<input type='submit' name='hideP' id='hideP' value='Pop Culture' />

  	$("hideP").click(function(){
  	$(".P").hide(2000);
 	});

How do I have more than one button in Jquery?

PvP is not for me

In the 3rd Year of the Boycott
Real-world money saved since FT/W: Hundreds of Dollars
Real-world time saved since FT/W: Thousands of Hours

http://www.w3schools.com/jquery/jquery_syntax.asp

 

jQuery Syntax Examples

 

$(this).hide()

Demonstrates the jQuery hide() method, hiding the current HTML element.

 

$("#test").hide()

Demonstrates the jQuery hide() method, hiding the element with id="test".

 

$("p").hide()

Demonstrates the jQuery hide() method, hiding all <p> elements.

 

$(".test").hide()

Demonstrates the jQuery hide() method, hiding all elements with class="test".

 

eg:

 

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(
function()
{
 $(".btest").click(
 function()
 {
   $(".test").hide();
 });

 $(".btest2").click(
 function()
 {
   $(".test").show();
 });

 $("#btest3").click(
 function()
 {
   $(".test").hide();
 });

 $("#btest4").click(
 function()
 {
   $(".test").show();
 });
});
</script>
</head>
<body>

<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btest">hide(class)</button>
<button class="btest2">show(class)</button>
<button id="btest3">hide(id)</button>
<button id="btest4">show(id)</button>
</body>
</html>

  • Author

Thanks. That turned on the light.

PvP is not for me

In the 3rd Year of the Boycott
Real-world money saved since FT/W: Hundreds of Dollars
Real-world time saved since FT/W: Thousands of Hours

Create an account or sign in to comment

Important Information

By using this site, you agree to our Terms of Use.

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.