CODEWITHSUNDEEP
jqueryhtmlcss
Bittu
Bittu

Reputation: 387

Change button text to bold

I have this code which shows/hides the div on click. 

<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
       <title>slide demo</title>
         <style>
           #showmenu {
               background: '#5D8AA8';
               border-radius: 35px;
               border: none;
           height:30px;
           width:140px;
           }

        </style>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
     </head>
    <body>
      <div ><button id="showmenu" type="button"><b>Show menu</b></button></div>
     <div class="menu" style="display: none;">
        Can the button value change to "show" or "hide"
     </div>
     <script>
        $(document).ready(function() {
        $('#showmenu').click(function() {
        $('#showmenu').text($('.menu').is(':visible') ? 'Show Menu' : 'Hide Menu');
        $('.menu').toggle("slide");
       });
     });
     </script> 
 </body>
</html>

Everything works fine. But I want the text to be in bold. How can I do that? It is bold for the first time. But when the text changes from jQuery, it is displayed as normal text. What are the changes I have to make ?

Upvotes: 4

Views: 44782

Answers (5)

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18133

Add this to your stylesheet

button {
   text-weight: bold;
}

Upvotes: 3

Milan and Friends
Milan and Friends

Reputation: 5610

You could use .html instead of .text like this

$(document).ready(function() {

  $('#showmenu').click(function() {
    $('#showmenu').html($('.menu').is(':visible') ? '<b>Show</b>' : '<b>Hide</b>');
    $('.menu').toggle("slide");
  });
});

Here's a Fiddle and please don't use inline styling with HTML5 if you want your code to be valid.

Upvotes: 0

bipen
bipen

Reputation: 36551

just change your selector to 

  $('#showmenu b').text($('.menu').is(':visible') ? 'Show Menu' : 'Hide Menu');
      //-------^---here

Upvotes: 0

GautamD31
GautamD31

Reputation: 28773

Try with inline-style like

<button id="showmenu" type="button" style="font-weight:bold;">show menu</button>

Using internal/external-style use like

#showmenu {
     font-weight : bold ;
}

Upvotes: 17

Itay
Itay

Reputation: 16785

You can use the CSS font-weight setting.

Add this to your CSS:

#showmenu {
   font-weight: bold;
}
  • After adding this you can remove the <b> tags from the button's content.

Upvotes: 5

Related Questions