?
Solved

how do I toggle bolding text?

Posted on 2009-05-12
4
Medium Priority
?
657 Views
Last Modified: 2012-05-06
Hello Experts,

Please review code below.
I would like to bold the div text when clicked and want to unbold the previous one clicked (toggle).

See what I mean?

Thx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
<title>JS toggle</title>
<script language="JavaScript">
 
function bold(id){
var current = "";
	if(id == "one"){
		var bold = document.getElementById(id);
		bold.style.fontWeight = "bold";
		current = id;
		
		if(current){
			var unbold = document.getElementById(current);
			unbold.style.fontWeight = "none";
		}
	}
	if(id == "two"){
		var bold = document.getElementById(id);
		bold.style.fontWeight = "bold";
		current = id;
		
		if(current){
			var unbold = document.getElementById(current);
			unbold.style.fontWeight = "none";
		}
	}
	if(id == "three"){
		var bold = document.getElementById(id);
		bold.style.fontWeight = "bold";
		current = id;
		
		if(current){
			var unbold = document.getElementById(current);
			unbold.style.fontWeight = "none";
		}
	}
}
 
</script>
</head>
 
<body>
<div id="one" onclick="bold('one'); return false; "> text </div>
<div id="two" onclick="bold('two'); return false; "> text </div>
<div id="three" onclick="bold('three'); return false; "> text </div>
</body>

Open in new window

0
Comment
Question by:epifanio67
  • 2
4 Comments
 
LVL 15

Assisted Solution

by:ncoo
ncoo earned 400 total points
ID: 24366549
You could do the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
<title>JS toggle</title>
<script language="JavaScript">
 
function bold(id){
	var elem = document.getElementById(id);
	if (elem.style.fontWeight=='bold') {
		elem.style.fontWeight ='';
	} else {
		elem.style.fontWeight ='bold';
	}
}
</script>
</head>
 
<body>
<div id="one" onclick="bold('one'); return false; "> text </div>
<div id="two" onclick="bold('two'); return false; "> text </div>
<div id="three" onclick="bold('three'); return false; "> text </div>
</body>

Open in new window

0
 

Author Comment

by:epifanio67
ID: 24366612
Thx ncoo,

I just tested your suggestion.
When I click on div one, the text does bold. However, when I click on div two, it also bold; but it does not unbold div one.

They all bold when clicked. I want to be to have one bold text/div per click.

See what I mean?
Thx,
0
 

Accepted Solution

by:
kostyak earned 1600 total points
ID: 24366928
epifanio67:
Here's the solution that I would go with:

Hope I did not oversimplify your code, and you get what you're looking for...
<html>
<head>
<title>JS toggle</title>
<script language="JavaScript">
var current = "";
 
function bold(obj){
	obj.style.fontWeight = 'bold';
	if(current != '') {
	    document.getElementById(current).style.fontWeight = '';
	}
	current = obj.id;
} 
</script>
</head>
 
<body>
<div id="one" onclick="bold(this); return false; "> text </div>
<div id="two" onclick="bold(this); return false; "> text </div>
<div id="three" onclick="bold(this); return false; "> text </div>
</body>

Open in new window

0
 

Author Closing Comment

by:epifanio67
ID: 31580613
Excellent Kostyak... it is exactly what I was looking for....

Regards,
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question