Comments on: Writing multiple toggle links in JQuery http://www.olliekav.com/web-design/writing-multiple-toggle-links-in-jquery All things design, music and more... Tue, 09 Mar 2010 21:16:26 -0800 http://wordpress.org/?v=2.9.2 hourly 1 By: Marco http://www.olliekav.com/web-design/writing-multiple-toggle-links-in-jquery/comment-page-1#comment-1090 Marco Thu, 25 Feb 2010 17:39:13 +0000 http://www.olliekav.com/?p=127#comment-1090 A demo would be useful! :) I'm struggling with the simplest part now: how to write the html code to hide / show the div? A demo would be useful! :)
I’m struggling with the simplest part now: how to write the html code to hide / show the div?

]]> By: Dan http://www.olliekav.com/web-design/writing-multiple-toggle-links-in-jquery/comment-page-1#comment-1085 Dan Mon, 22 Feb 2010 04:34:52 +0000 http://www.olliekav.com/?p=127#comment-1085 Thanks for the great example! I have one small problem: if the anchor has more than one class, e.g. <a class="link foo"..., then "[name^=value]" does not work. Is there a work around for this? Thanks for the great example!

I have one small problem: if the anchor has more than one class, e.g. <a class="link foo"…, then "[name^=value]" does not work. Is there a work around for this?

]]> By: Nick http://www.olliekav.com/web-design/writing-multiple-toggle-links-in-jquery/comment-page-1#comment-1077 Nick Fri, 27 Nov 2009 18:07:47 +0000 http://www.olliekav.com/?p=127#comment-1077 I see this in your code, and I've seen other people do this with jquery too, but I don't understand why people do it. <code> var $this = $(this); var x = $this.attr("className"); </code> what's the point of making the variable $this when it doesn't make the code smaller or more understandable. why couldn't you just do this: <code> var x = ($this).attr("className"); </code> and leave out: <code>var $this = $(this);</code> I see this in your code, and I’ve seen other people do this with jquery too, but I don’t understand why people do it.

var $this = $(this);
var x = $this.attr("className");

what’s the point of making the variable $this when it doesn’t make the code smaller or more understandable.

why couldn’t you just do this:

var x = ($this).attr("className");

and leave out:
var $this = $(this);

]]> By: olliekav http://www.olliekav.com/web-design/writing-multiple-toggle-links-in-jquery/comment-page-1#comment-1036 olliekav Tue, 10 Nov 2009 00:25:28 +0000 http://www.olliekav.com/?p=127#comment-1036 Hi Violet, Yes that does seem like a lot of duplicate code. I won't have a chance to look at this though as I am away travelling. Hopefully someone else can help you. Hi Violet,

Yes that does seem like a lot of duplicate code. I won’t have a chance to look at this though as I am away travelling. Hopefully someone else can help you.

]]> By: violet http://www.olliekav.com/web-design/writing-multiple-toggle-links-in-jquery/comment-page-1#comment-940 violet Wed, 04 Nov 2009 00:28:13 +0000 http://www.olliekav.com/?p=127#comment-940 Ok, first of all, awesome post. Second, I need some help... I have 2 columns. On the left is where thumbnails will display, on the right are the links to show/hide div's on the left. Ok, so you click on a link on the right, on the left a div appears. In the div are 4 thumb nails, you mouse over a thumbnail, and then a larger version appears. Ok, so I DO have this working, however, I am having to duplicate a LOT of code each time I want to show/hide the divs and each time I want to show/hide thumbnail images. I consolidated my hidden divs, but I can't get the toggles to work doing something similar (as seen with multiple link tutorials). Here is my code: Javascript: <code> $(document).ready(function() { $('[id^=pwnbox]').hide(); $('[id^=big]').hide(); $('#toggle1').click(function() { $('#pwnbox1').slideToggle(400); $('#pwnbox2').hide(300); return false; }); $('#toggle2').click(function() { $('#pwnbox2').slideToggle(400); $('#pwnbox1').hide(300); return false; }); $('#togglebig1').mouseover(function() { $('#big1').show(400); return false; }).mouseout(function() { $('#big1').hide(400); }); $('#togglebig1-2').mouseover(function() { $('#big1-2').show(400); return false; }).mouseout(function() { $('#big1-2').hide(400); }); $('#togglebig1-3').mouseover(function() { $('#big1-3').show(400); return false; }).mouseout(function() { $('#big1-3').hide(400); }); $('#togglebig1-4').mouseover(function() { $('#big1-4').show(400); return false; }).mouseout(function() { $('#big1-4').hide(400); }); $('#togglebig2').mouseover(function() { $('#big2').show(400); return false; }).mouseout(function() { $('#big2').hide(400); }); }); </code> My HTML code: <code> Mouseover a thumbnail to view a larger image<a href="#" rel="nofollow"></a><a href="#" rel="nofollow"></a> <a href="#" rel="nofollow"></a> <a href="#" rel="nofollow"></a>CHAMPION INDUSTRIAL CONTRACTORS, INC. has worked closely with Kaiser Permanente on numerous Medical Office Buildings throughout the Central Valley. Design/build projects include Medical Office Buildings in Manteca, Modesto, and Selma. <a href="#" rel="nofollow"></a>CHAMPION INDUSTRIAL CONTRACTORS, INC. has worked closely with Kaiser Permanente on numerous Medical Office Buildings throughout the Central Valley. Design/build projects include Medical Office Buildings in Manteca, Modesto, and Selma. Projects <a href="#" rel="nofollow">Kaiser Permanente</a> <a href="#" rel="nofollow">Del Rio</a> </code> Ok, first of all, awesome post. Second, I need some help…

I have 2 columns. On the left is where thumbnails will display, on the right are the links to show/hide div’s on the left.

Ok, so you click on a link on the right, on the left a div appears. In the div are 4 thumb nails, you mouse over a thumbnail, and then a larger version appears.

Ok, so I DO have this working, however, I am having to duplicate a LOT of code each time I want to show/hide the divs and each time I want to show/hide thumbnail images. I consolidated my hidden divs, but I can’t get the toggles to work doing something similar (as seen with multiple link tutorials).

Here is my code:
Javascript:

$(document).ready(function() {
$('[id^=pwnbox]').hide();
$('[id^=big]').hide();

$('#toggle1').click(function() {
$('#pwnbox1').slideToggle(400);
$('#pwnbox2').hide(300);
return false;
});

$('#toggle2').click(function() {
$('#pwnbox2').slideToggle(400);
$('#pwnbox1').hide(300);
return false;
});

$('#togglebig1').mouseover(function() {
$('#big1').show(400);
return false;
}).mouseout(function() {
$('#big1').hide(400);
});
$('#togglebig1-2').mouseover(function() {
$('#big1-2').show(400);
return false;
}).mouseout(function() {
$('#big1-2').hide(400);
});
$('#togglebig1-3').mouseover(function() {
$('#big1-3').show(400);
return false;
}).mouseout(function() {
$('#big1-3').hide(400);
});
$('#togglebig1-4').mouseover(function() {
$('#big1-4').show(400);
return false;
}).mouseout(function() {
$('#big1-4').hide(400);
});

$('#togglebig2').mouseover(function() {
$('#big2').show(400);
return false;
}).mouseout(function() {
$('#big2').hide(400);
});

});

My HTML code:

Mouseover a thumbnail to view a larger image

CHAMPION INDUSTRIAL CONTRACTORS, INC. has worked closely with Kaiser Permanente on numerous Medical Office Buildings throughout the Central Valley. Design/build projects include Medical Office Buildings in Manteca, Modesto, and Selma.

CHAMPION INDUSTRIAL CONTRACTORS, INC. has worked closely with Kaiser Permanente on numerous Medical Office Buildings throughout the Central Valley. Design/build projects include Medical Office Buildings in Manteca, Modesto, and Selma.

Projects

Kaiser Permanente
Del Rio

]]>