Jquery toggle an element

toggle is a method which is used to show and hide the selected class. if select element is hidden then on toggle it will show element.
If element is not hidden on toggle it will hide the element.

Output

We can also specify the toggle time and function to perform task of toggle done

Output

Hide and show html elements using jquery

Hide and show function are used to show and hide any html element.
Here on button click we are showing and hiding the div.

Output

We can also provide how long this hide or show will take place be specifying the time
like

$(“.description”).hide(2000);
or $(“.description”).show(2000);

to perform specific task after hide or show we can use

Output

jquery get parent id based on class value

If we have nested divs one inside another and we want to get id of parent div for this we use parents().

suppose following div structure

as above we have seen how to get id for top parent and similar we can get id or class value for any level of parent.
for getting class value we can use following which will give second level divs class based on its id value.

Getting id and class value of a html element

We have a div and we want to get its id value based on its class value.

Suppose a div is given as below and we want to fetch div id based on a button click.
for getting attribute id we use attr() method.

Example

Output

Changing text on mouse over event

Change text of html element on mouseover and on mouseleave event it should show original message.

Example

Output:

Replacing content of div using .replaceWith()

To replace the content of a div span or any other block elements content with html element a jquery method .replaceWith() is used.
Syntax:

or

A selector can be id class or tag selector of element to replace with newContent passed in .replaceWith() method. a newContent can be html string, DOM element, Array or object.
Another syntax uses any function that evaluates and replace the selector with new function return value.

There is a div with id value a with content Hi how are you. Here id a will replaced with div id with value b and content I am fine when ever user click on button.

Example:
Html page is

We want to replace <div id=”a”> with following content

To achive above with jquery we will use following code

Output:

Here new content will be

Lets use function in replaceWith method

Jquery code


.replaceWith() does not clone the object it replace the content on DOM.

HTML Bold Italic & Underline Tags

For creating bold Itelic and Underline text we use following syntax.
We can also use nesting of tags

Example:

Output:

This is bold text
This is italic text
This text is underline
This is bold and italic text

HTML 5 Document Structure

General HTML 5 Document Structure is as below

<!DOCTYPE html> specifies that this document is html 5 document and you can use all html5 tags here.

<html> is root tag of html document it contains two child tags <head> and <body>

<head> specifies that this portion contains heading information of page we can use many other tags here like <title> which is used to specify the title of page and may other.

<body> we put the contents which you would like to display on browser.
Inside body tag we use many different html tags to proper formatting the data.

HTML logo png

Find HTML5 LOGO Here

HTML5 LOGO

Example

In above syntax start and end tags are optional.

if you dont want to use any attribute with root tab ie <html lang=”en”> then you can omit this

So syntax with out root tag

Exampe of html document

Example

In the XHTML syntax we have to specify the xmlns to declare that it is a HTML namespace.

We can use lang or xml:lang attribute to specify the language

Syntax with xmlns

Example

Example

Read More

  1. HTML Image Tag

HTML pre tag

The pre tag is used to display preformatted text in HTML document. pre tag preserves the content structure it can be used to show pre-formated data stored in the database and in another documents and to show computer codes programs to HTML document.

Syntax:

Example:

Result:

Pre tag can also be used to represent formatted computer codes like programing language code to show in HTML document like below

Example:

Result: