New Posts  All Forums:Forum Nav:

jquery toggle

post #1 of 4
Thread Starter 
I have been reading up on jquery lately and wanted to implement the jquery toggle effect in a side search options. Only problem is when i duplicate the buttons from w3schools and click on one ALL the buttons toggle. How can i get this to were only the button clicked will change the effect??

I will be replacing the button for <ul>s and adding all <li>s instead of <p>

Code:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle("slow");
  });
});
</script>
</head>
<body>

<button>Toggle</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>

<button>Toggle</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>

</html>

Edited by graphicsman - 10/6/11 at 8:30am
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
post #2 of 4
You need to target just the items next to the button,
I suggest modifying your code to this :
Code:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $(this).next("div").toggle("slow");
  });
});
</script>
</head>
<body>

<button>Toggle</button>
<div>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</div>
<button>Toggle</button>
<div>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</div>
</html>
You can probably use different selectors when you switch to <li>
Read up on the jQuery Selectors, you'll be using them a lot.
Main PC
(13 items)
 
  
CPUMotherboardGraphicsRAM
i5 2500k Asus Maximus IV Gene-Z MSI 6950 2gb Unlocked Ref GSkill Ripjaws X 8GB CL8 
Hard DriveOSMonitorKeyboard
Crucial M4 128GB Windows 7 Ult Samsung 24" ToC Das Professional Silent 
PowerCaseMouse
Seasonic X750 Corsair 650d Logitech G700 
  hide details  
Reply
Main PC
(13 items)
 
  
CPUMotherboardGraphicsRAM
i5 2500k Asus Maximus IV Gene-Z MSI 6950 2gb Unlocked Ref GSkill Ripjaws X 8GB CL8 
Hard DriveOSMonitorKeyboard
Crucial M4 128GB Windows 7 Ult Samsung 24" ToC Das Professional Silent 
PowerCaseMouse
Seasonic X750 Corsair 650d Logitech G700 
  hide details  
Reply
post #3 of 4
Alright, so here's the problem. On these lines:

Code:
$("button").click(function(){
  $("p").toggle("slow");
What you're basically saying here is that, any tag <button>, when clicked, should open every <p> tag. This is why everything is opening. You're literally telling it to open anything called <p>. Although jonowxeno's code is nice, simple, and clean, here's something you might understand a little more easily:

Code:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#button_1").click(function(){
    $("#toggle_1").toggle("slow");
  });
  $("#button_2").click(function(){
    $("#toggle_2").toggle("slow");
  });
});
</script>
</head>
<body>

<button id="button_1">Toggle</button>
<div id="toggle_1">
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</div>

<button id="button_2">Toggle</button>
<div id="toggle_2">
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</div>

</html>
Ok, so first thing I did is assign everything an ID. The first button is now button_1, with the <p> tags surrounded in a div with ID "toggle_1". Did the same thing for the second section.

So now, the jQuery understands (remember the '#' before the name means 'id'): if button_1 clicked, toggle toggle_1; if button_2 clicked, toggle toggle_2.

This is all selectors, you should read up on them
post #4 of 4
Thread Starter 
thanks guys, i understand both now but Jonowxeno will be more practical since i will be using these times 20 about.
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding