Click the "Bold" button and click again to "Unbold"

Question

I am new to javascript. I want to make a button in html using javascript. When the user tries to click the button, the specific <#id> will be "Bold" and click "Expand" again.

How can i do this? Please refer to any supporting material. Thanks!

Answer 1

Since learning experience is vital, especially for Javascript, I will lead you in the right direction.

First, you should learn about event binding and mouse event handling with jQuery. You can do some powerful things with this knowledge, including what you would like to do.

Secondly, look at the basic jQuery selectors . It's easy to learn simple CSS-based selectors that you can use to select the id you want.

Third, look at the css() jQuery function, which falls under jQuery CSS . You can use this to set various item properties, including font weight.

Answer 2

I assume that you are trying to build something like RTE. So applying a class to get a bold effect would be the best and most effective solution to this.

It can be done as simple as this.

 $(".boldtrigger").click(function() { //boldTrigger being the element initiating the trigger $(".text").toggleClass("bold"); //text being the element to where applied to it. }); 

CSS

 .bold { font-weight: bold; } 

Demo

Answer 3

here is another question that uses .toggleClass for the opposite effect. you need to create a class for this specific element as it adds and switches classes back and forth.

Using jQuery to switch between styles

---

for one-way change:

 $('button_selector').on('click',function(){ $('item_to_bold_selector').css('font-weight','bold'); }); 

links for this:

• selectors
• . for event handling
• . css to add styles on the go

Answer 4

The jQuery toggle () method should take care of this.

 $('#foo').toggle(function() { $('#bar').css('font-weight', 'bold'); }, function() { $('#bar').css('font-weight', 'auto'); }); 

When you press #foo , it will execute the next function sequentially, so this is exactly what you want.

Answer 5

here is the code for bold and expandable text

  <div id="contentDiv"> content of the page. </div> <input type="button" value="Bold" id="font-button"></input>​ jQuery("#font-button").on("click",function(){ var button = $(this); var contentDiv= $("#contentDiv"); if(button.val() == "Bold"){ contentDiv.css("font-weight","bold"); button.val("UnBold"); }else{ contentDiv.css("font-weight","normal"); button.val("Bold"); } });​ 

Demo

Answer 6

 $('button_selector').on('click',function(){ var itemToBold = $('item_to_bold_selector'); if (itemToBold.css('font-weight') == 'bold') { $('item_to_bold_selector').css('font-weight','normal'); } else { $('item_to_bold_selector').css('font-weight','bold'); } }); 

Based on Joseph’s answer, but with unclick criteria.

Answer 7

Since you tagged this post with jQuery, I assume you are looking for a jQuery approach.

If you want to use the CSS class to add bold style, I recommend that you take a look at using toggleClass: http://api.jquery.com/toggleClass/

Many samples on this page ...

Answer 8

I like to use toggleClass() ( API link )

 $("#button").click(function(){ $("#element").toggleClass("bold"); }); 

If on click it has ".bold", it will unscrew and vice versa.