In this third JQuery tutorial, I will be focusing on how to slide elements up and down (it is similar to hide and show), Insert new elements and finally check elements conditions (such as gender, terms and conditions and so on).

1. Slide element up and down

JQuery Slide Up
JQuery Slide Up Method

The function is called SlideUp and refers to a divTest which calls a slideUp method. In the body, there is a div that calls the slideUp function when a user clicks (onclick method) on the “Click Here” text. In addition, some style has been added so that when a user mouses over, the cursor turns into a pointing hand. (style=”cursor: pointer;”). The function is then applied to a div whose id=divTest. In this case, it is applied to the text “This thing slides up…” as it is contained inside the divTest. Some style has also been applied, the background-color (:blue), the font color (:white) and the size of the background (margin-top, width and height).

JQuery Down Method
JQuery Slide Down Method

This example shows how calling the JQuery slideDown() method allows a text contained in a divTest to appear when a user clicks some text. This JQuery function shows only few changes compared to the slideUp() method described above. This change is optional, as the function could be called anything we like! As it has been called slideDown(), the onclick method needs to call a slideDown() function now. The text inside the div whose id=divTest has been changed from “This thing slides up…” to “This thing slides down…“. The text is optional, you can insert anything! Even the picture of a big fluffy cat holding a light saber! The final change is adding some necessary style, that is a “display: none;” option into the our divTest. This is required as we want the text defined by blue background to appear when people click on the text “Click Here“.

Here’s the code: JQuery Slide UP and DOWN Method

2. Insert Element

In JQuery there are two methods: insertAfter() and after() to insert html content or text after the matching elements.

JQuery Insert Methods
JQuery Insert Methods

 

In the above example we have defined a function called insertAfterHtml() which calls two JQuery methods. an .insertAfter() and .after(). In both cases, the method inserts some text after the tag whose id=divInsertAfter. The only difference is in the syntax.

Here’s the code: JQuery Insert Element

3. Check Element Conditions

The JQuery method “is()“checks if an element matches a given conditions and then returning a True or False.

JQuery Check Element Conditions
JQuery Check Element Conditions

The JQuery function is called checkGender and uses the method .is(“;checked”) to test if a tag (input type=”radio”) called either #checkFemale or #checkMale has been selected. The “Click Here” text calls the checkGender() function which displays the Alert() depending on the selection which is based on the tag id, either checkFemale or checkMale.

Here’s the code: JQuery Check Element Condition

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.