Button background color

JavaScript
1

Hi,

Got a button that does its little color dance thing by default fine except I want it to not have a green solid block color when the toggle is clicked a second time to ‘hide’ the #sequences div. So when mouseover and when clicked to show Sequences it stays green, but when clicked again to hide sequences it will have a null color thereby looking like a regular line of text again.

button id=“controlsequences”>

jQuery(document).ready(function(){
	jQuery('#controlsequences').on('click', function(event) {
		jQuery('#sequences').toggle('show');
	});
});

great!

2

If you add/remove a class with your JS then you can style the button as you want.

It wasn’t clear if you wanted the button to start life as a button or as a line of text. Or just start as text, turn into a button and then return to text?

Anyway you can achieve any of the above by manipulating the following code.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#sequences {
	display:none
}
#controlsequences.isInUse {
	background:transparent;
	border:1px solid transparent;
}
#controlsequences, 
#controlsequences.active, 
#controlsequences:hover {
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	background:green;
	border:1px solid #000;
	padding:5px 10px;
	display:inliner-block;
	border-radius:4px;
	outline:0;
}
#controlsequences{background:#f9f9f9;}
#controlsequences:focus {
	border:1px dotted #ccc;
}
</style>
</head>

<body>
<button id="controlsequences" >Testing</button>
<div id="sequences">This is the sequences div</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script>
jQuery(document).ready(function(){
	jQuery('#controlsequences').on('click', function(event) {
		jQuery(this).addClass('isInUse');
		jQuery(this).toggleClass('active');
		jQuery('#sequences').toggle('show');
	});
});

</script>
</body>
</html>
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.