jQuery Toggle CSS

jQuery CSS

Using jQuery JavaScript and  CSS to toggle the CSS properties of an object.

Toggle the CSS (Cascading Style Sheets)


For Example , customize the background image / font size / border / colors / font types and most CSS property and corresponding values available.



An Example of Toggling the CSS



CSS tag definition 

CSS by tag definition
$("p")
for the paragraph tag.

CSS class definition example

CSS by class definition , a single dot 
css_class_01
customizes that the style uses the css class attribute
class="css_class_01" 
within a tag.

In jQuery To select the specific class css_class_01
$(".css_class_01")

CSS Classes


An example of using the CSS class attribute for a HTML Element.

<p class="cssStyle01">CSS Class defined Content</p>

Inline CSS style <p style="color:blue"> Inline CSS Class defined Content </ p>

CSS by class definition
.cssStyle01 {


color:yellow;
font-size: 12px;


}
CSS by tag definition
[ P for the paragraph tag <p></p>]

P {


color:yellow;
font-size: 12px;


}

Combining CSS by tag and class definition. 
An example defining the class bluetext of the paragraph tag.


p.bluetext {


color:blue;


}

Using the jQuery JavaScript API in the HTML Box you can  Toggle CSS  of  HTML elements within Google Sites.



 jQuery Method : 


toggleClass();

The jQuery JavaScript API has a range of selectors such as by tag 

$("p") jQuery tag selector for a paragraph tag
$("button") for a button tag
$("#id_selector") jQuery id selector for an ID id="..." attribute within a tag

$(".class_selector")jQuery class selector for a CSS class class="..." attribute within a tag






















Google APi Library

https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js

HTML Box Example Code:


Copy and paste the code below and Insert > HTML Box in your Google Sites webpage.

jQuery Method
Combined CSS tag & Class
CSS Defined Class
jQuery Paragraph Selector

<style>

  p { 
margin: 4px; 
font-size:16px; 
font-weight:bolder;
cursor:pointer;
color:black; 
}

p.bluetext {color:blue}
  
  .cssStyle01 { background:yellow; }

</style>
  

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js">
</script>


<button class="a">Toggle CSS</button>
  <p>Click to toggle CSS </p >
  <p>to highlight</p >
  <p  class="bluetext">the words in these</ p>
  <p  class="bluetext">paragraph tags</ p>

<script>
    $("button").click(function () {
      $("p").toggleClass("cssStyle01");
    });
</script>


Some Examples of CSS Definitions and values:


margin: 4px; 
font-size:16px; 
font-weight:bolder;
background-image:url('/image.png');
cursor:pointer;
color:black; 
border: 2px;
display: table-cell;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 345px;
line-height: normal;
outline-color: black;
outline-style: none;
outline-width: 0px;
padding: 0px;
text-align: -webkit-auto;
vertical-align: top;
white-space: normal;
width: 1080px;