StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POToggle the css property of a div using jquery/javascript
text
Body
copied!<p>I'm trying to write a code where I can toggle the CSS property of a div. Basically I'm trying to create a button that has a normal state and an active state.</p> <p>Its normal color is blue but once you click it, it becomes green. Click it again and it goes back to being blue.</p> <p>CSS:</p> <pre><code> .lblue{ -moz-border-radius: 3px; border-radius: 3px; box-shadow: 0 1px 2px #fff, /*bottom external highlight*/ 0 -1px 1px #666, /*top external shadow*/ inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ inset 0 1px 1px rgba(255,255,255,0.8); /*top internal highlight*/ font-size: 16pt; padding: 5px; margin: 5px; color: white; background: #4bc2d3; /* Old browsers */ background: -moz-linear-gradient(top, #4bc2d3 0%, #70d6e2 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4bc2d3), color-stop(100%,#70d6e2)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #4bc2d3 0%,#70d6e2 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #4bc2d3 0%,#70d6e2 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #4bc2d3 0%,#70d6e2 100%); /* IE10+ */ background: linear-gradient(to bottom, #4bc2d3 0%,#70d6e2 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4bc2d3', endColorstr='#70d6e2',GradientType=0 ); /* IE6-9 */ font-family: OpenSans-Semibold; float: left; } .lgreen{ -moz-border-radius: 3px; border-radius: 3px; box-shadow: 0 1px 2px #fff, /*bottom external highlight*/ 0 -1px 1px #666, /*top external shadow*/ inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ inset 0 1px 1px rgba(255,255,255,0.8); /*top internal highlight*/ font-size: 16pt; padding: 5px; margin: 5px; color: white; background: #7ebb44; /* Old browsers */ background: -moz-linear-gradient(top, #7ebb44 0%, #a5d063 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7ebb44), color-stop(100%,#a5d063)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #7ebb44 0%,#a5d063 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #7ebb44 0%,#a5d063 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #7ebb44 0%,#a5d063 100%); /* IE10+ */ background: linear-gradient(to bottom, #7ebb44 0%,#a5d063 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7ebb44', endColorstr='#a5d063',GradientType=0 ); /* IE6-9 */ font-family: OpenSans-Semibold; float: left; } </code></pre> <p>HTML:</p> <pre><code> <div class="lblue">Soul</div> </code></pre> <p>JS:</p> <pre><code> $('.lblue').click(function() { $('.lblue').toggle(function() { $('.lblue').addClass('lgreen'); }); }); </code></pre> <p>The problem with my code is that for some reason when I click the button, the button disappears as if it is sliding out.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload