HTML is grade for many reasons. It is simply structured, easy to read, easy to write. You ca even make links to other websites and connect the page with the world wide web. In addition the CSS makes the experience much appealing to the human eye.
But what if you want to show certain parts base on some logic, react to the user behaviour. The most common example can be a collapsible menu or image carousel (sure you can do it with CSS too if you are smart enough). The need for such cases are way way brother then you might think.

What if you want to change part of the website within the actual website, or do something based on certain conditions, like the user start to scroll, how far the user scrolled already and so on.

There is no way how to do it in HTML. There are no IFs, THENs, ELSEes. No way how to check if something happend or not, it is lays on server – speaking of bare HTML without server processing. Which is the level we are in (more on server processed website way later).


The conditions are simple questions which if they are meet something else will happen.
For example:

If user clicks on menu
     the menu should show hidden submenu

Such an easy condition, but there is no way how to do it in HTML. HTML has no condition specification, the language does not understand what such a thing like condition is. Nobody tells it, nobody made it that way. For a reason.
The HTML is made for static declaration, and just that. There are many reasons, but one of them is that is there is no condition, there is nothing serious going on. Thanks to it we can write dirty HTML, and if the browser does not understand the code, because of the typo or wrong attributes or anything, the browser kinda guesses, and tries to fix it or keep going and just does what it can. It basically does not care what it does. Its work is to represent not think.

But conditions are elementary to any action.
Action creates reaction, only when the conditions are meet.

And conditions are meet when the sensor detects the action.. the sensor sends it to the brain.. the brain defines how the body will react. Although this is not the most elementary condition statement like in physique. it fits to the web, or any computer programming behavioral logic.

And os the sensor might be an item checking if it is not clicked, the brain is your conditions for easy of use wrapped in a function which tells other parts of the body to react in this or that way, or stay silent.


Enough fairytales, lets get virtual.

The most elementary condition might be:

if( a == b){
  // do something when a is same like  b
}else if(a > b){
  //  do something when a is bigger then b
  // do something when none of the above conditions is meet

Link to IF, ELSE to condition specs

Although there are many conditional programming languages we will choose one, most suitable for our use in web environment that helps us to detect the user and user system information and reactions.

This Language is the JavaScript. Before we touch the Javascript we will not step, but jump way ahead and work with a javascript Library, that makes the work with Javascript way easier and much quicker, the jQuery (jQuery is abbreviation for javacsript Query).

Jquery has hooks/functions we can hook to the divs and all html elements in more natural way.

The menu behaviors mentioned above would look like this:

		<style type="text/css" media="screen">
				display: inline-block;
				border:1px solid #ddd;
				position: absolute;
		<script src=""></script>

		// when the html is ready use run the Jquery magic
		jQuery(document).ready(function($) {
				// if the user clicks on item
					// run our function
					function (e) {
						// prevent default browser behavior
						// toggle the CSS display declaration between "hide" and "block"

		<div id="menu">
			<div class="item">
				<div class="submenu">
			<div class="item">item</div>
			<div class="item">item</div>
			<div class="item">item</div>
			<div class="item">item</div>
			<div class="item">item</div>


What we see here is the HTMl representing the menu scaffold and the style basic declaration, declaring that the submenu is hidden by default. Plus we call the Jquery Library from the google CDN as we did for Bootstrap in some lesson ago.
There is another part of yet unknown code and that is the <script>..</script>. This is the place where the logic, the brain is defined. If you read the comments in the code (the text starting with the double slash) it should give you pretty good explanation of what it does and how.  Again the language is written in English, and it is easy to understand. Although there is not explicit IF statement declared the IF statement is sort of natural part of the click check. If the item is clicked… do what follows “inside” of this condition. When I say inside I mean inside the condition defined by the curly braces {}.

Sure there are some “abraka dabra” words that one should know how to use, like .ready(), .click(), .toggle(). Those are functions. Functions are part of the project brain that does certain job. The whole logic can by written without function, but that would be complete mess. It is better like in any other design to brake the whole into manageable parts that can be reused.

Lets be more code specific, lets brake the code a bit and explain what it does and how it works. See explanation in the code.

// the dollar sign is and variable that serves as a shortcut for the jQuery library that does all the magic and has useful functions, like toggle, show, hide, etc.
// the name in first brackets is known already. It is a element name as we define in CSS, dot for class, hash for id.. with names
// the .toggle() is a function that toggles the visibility of the addressed element, as you can see it starts with a dot. The dot is like slash in folders. Each function can have another function inside, this is how we walk within the function structure.


// in plain words it would sounds like this:
// hey "Jquery" get the guy with surname "submenu" and apply on it one of your magics/function "toggle" which hides and unhides object.. what a magic!


You might not understand how to code the logic at this point, but you know the concept of what is static and what might make it reactive and how.