Menu
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 ?
452
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 ;
}
You can use the CSS font-weight setting.
Add this to your CSS:
#showmenu {
font-weight: bold;
}
<b> tags from the button's content.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
