Dynamic toggle function with jquery?

Question

I'm trying to create a flexible toggle function with jQuery where I take the ID of the item to be toggled as a parameter. the function is triggered by a link which passes the correct ID to the function.

here is the code at the moment:

function boldToggler(itemid){
$(itemid).toggle(function(){
    $(itemid).css("font-weight","bold");},
function(){
    $(itemid).css("font-weight","normal");});
}

which is triggered by links like this:

<a href="javascript: boldToggler('h1')">toggle style for this item</a>
<a href="javascript: boldToggler('h2')">toggle style for this item</a>

is there a way to get this to work? it would save me writing hundreds of toggle functions!

Any help would be amazing, thanks

the toggle function is deprecated in the latest version of jquery — Clyde Lobo
– Clyde Lobo, Commented Sep 5, 2012 at 12:04

VisioN · Accepted Answer · 2012-09-05 11:58:45Z

5

Do you mean something like that?

function boldToggler(itemid) {
    $(itemid).css("font-weight", function(i, val) {
        return val == "bold" ? "normal" : "bold";
    });
}

DEMO: http://jsfiddle.net/kbQXd/

answered Sep 5, 2012 at 11:58

VisioN

146k35 gold badges287 silver badges291 bronze badges

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

5 Comments

adeneo Over a year ago

I'll upvote this one, as using classes or the deprecated toggle() function is'nt really an answer.

Clyde Lobo Over a year ago

Your example only works to bold the text. Not working for returning it to normal. I changed the return statement to return val == 700 ? 400 : 700; and it worked, fiddle : jsfiddle.net/kbQXd/1

Clyde Lobo Over a year ago

@VisioN : Doesn't work for me. May be some issue at my end. +1 anyways :)

Joe Over a year ago

Yes this is great! lets me pass tags or id's. thank you - if you have a minute, I was wondering what the i and val are passing exactly? would love to learn this, dynamic parameter lists/passing events etc! thanks again! joe

VisioN Over a year ago

@Joe This is a handler that receives 2 arguments: index of element and the old value. In order to change the value, the function should return new value. You can read about it here: api.jquery.com/css/#css2.

Fabrizio Calderan · Accepted Answer · 2012-09-05 12:10:36Z

2

Maybe this alternative code may be useful - Fiddle: http://jsfiddle.net/9zxbT/

HTML

<a href="#" data-toggle="h1">toggle style for H1</a>
<a href="#" data-toggle="h2">toggle style for H2</a>

<h1>this is H1</h1>
<h2>this is H2</h2>

CSS

.bold { font-weight: bold; }

jQuery

$('a[data-toggle]').on('click', function(evt) {
    evt.preventDefault();
    $($(this).data('toggle')).toggleClass('bold');
});

this completely removes your inline handlers, performs a better separation of javascript and CSS and make use of data-* attributes to set the desired selector

edited Sep 5, 2012 at 12:10

answered Sep 5, 2012 at 12:03

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

2 Comments

Jamiec Over a year ago

I swear I did not steal your idea... looks like great minds think alike!

Joe Over a year ago

Hi guys, nice code and thanks for the advice- for my particular application I need to edit the html directly without using extra classes (its for a cms template editor) - i will heed your advice on the data types in future though! thanks, joe

rahul · Accepted Answer · 2012-09-05 12:00:14Z

1

change your function to this

function boldToggler(itemid){
$('#' + itemid).toggle(function(){
    $('#' + itemid).css("font-weight","bold");},
function(){
    $('#' + itemid).css("font-weight","normal");});
}

answered Sep 5, 2012 at 12:00

rahul

7,6738 gold badges42 silver badges55 bronze badges

Comments

Jamiec · Accepted Answer · 2012-09-05 12:05:32Z

1

Id be tempted to change your markup a bit to make it a bit more jQuery-ish:

<a href="#" class="boldToggler" data-selector="h1">toggle style for h1</a>
<a href="#" class="boldToggler" data-selector="h2">toggle style for h2</a>

Then use a method like:

$('.boldToggler').click(function(){
    var itemSelector = $(this).data('selector');
    $(itemSelector).toggleClass('bold');
});

With a css class defined as:

.bold{
 font-weight:bold;  
}

Live example: http://jsfiddle.net/NTSzs/

answered Sep 5, 2012 at 12:05

Jamiec

136k15 gold badges143 silver badges202 bronze badges

2 Comments

Fabrizio Calderan Over a year ago

as in my solution you can avoid the class and simply use a[data-selector]

Jamiec Over a year ago

@FabrizioCalderan - Yeah, totally agree. I'll leave this as-is though to demonstrate a slightly different way of approaching the issue. After all, he might want an italicToggler too using the same data-selector attribute but changing a different cssClass!

Th0rndike · Accepted Answer · 2012-09-05 11:58:03Z

0

you're missing the '#':

$('#'+itemid).css....

answered Sep 5, 2012 at 11:58

Th0rndike

3,4363 gold badges25 silver badges43 bronze badges

Comments

Sam Tyson · Accepted Answer · 2012-09-05 11:59:12Z

0

You can use the toggleClass method in jQuery.

<a href="javascript: $('h2').toggleClass(bold);">toggle style for this item</a>

You just need to define the class:

.bold { font-weight: bold; }

answered Sep 5, 2012 at 11:59

Sam Tyson

4,6344 gold badges29 silver badges35 bronze badges

Comments

Salketer · Accepted Answer · 2012-09-05 11:59:54Z

0

function boldToggler(itemid){
    if($('#'+itemid).css("font-weight") == "normal"){
        $('#'+itemid).css("font-weight",'bold');
    }else{
        $('#'+itemid).css("font-weight",'normal');
    }
}

answered Sep 5, 2012 at 11:59

Salketer

15.8k2 gold badges32 silver badges64 bronze badges

Collectives™ on Stack Overflow

Dynamic toggle function with jquery?

7 Answers 7

5 Comments

2 Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

5 Comments

2 Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related