Reputation: 387
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
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
Reputation: 36551
just change your selector to
$('#showmenu b').text($('.menu').is(':visible') ? 'Show Menu' : 'Hide Menu');
//-------^---here
Upvotes: 0
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
Reputation: 16785
You can use the CSS font-weight setting.
Add this to your CSS:
#showmenu {
font-weight: bold;
}
<b>
tags from the button's content.Upvotes: 5