Should I learn JQuery or Bootstrap first

Hide and show elements via jQuery

Now we have all the basics to show or hide specific elements. Often you have areas that are only needed temporarily. For example, we want to have an area for the “social bookmarks” that can be hidden and shown with a click. For testing, you can test our social bookmarks at the bottom of this website and of course use them - that can never hurt and motivates us to keep writing :).

We use a DIV area for this (because this is usually also used here). We created this area in the following HTML code (with CSS in the header, so that it is easier to see what is happening).

And now we grab the functions to show and hide on the 2 links.

If we want the orange area to be hidden from the start, we will include it via CSS.

The speed of fading in and out can be adjusted

E.g. via:

  • show ('slow')
  • show ('fast')
  • show (500)

Just try it out. However, 2 links are actually awkward, since only one of them is always needed. Therefore, in the next section, only 1 link to fade in or out - depending on what is currently required.

toggle - only 1 link to fade in and out

What we have done so far with 2 links would make more sense with just one link. Depending on whether the area is already displayed, it is hidden or vice versa.

That's exactly what we're doing now. We make the text “Recommend” a “toggle link”.

We can also specify transition times for the jQuery function "toggle":

  • toggle ('slow')
  • toggle (200)
  • toggle ('almost')

It becomes interesting when, after a completed action, the next one automatically follows. How this works is shown in the following tutorial.