jQuery 101: Basic examples

Simple examples of selecting based on class and id of elements, binding a function to the click event, and changing css through jQuery.

by tbruyn

HTML

<!-- 
De container voor het hele uitklaptekst
- Deze uitklaptekst heeft de stijl beschreven in het css element 'expandable-section' 
-->
<div class="expandable-section">
  <!-- 
  De uitklapknop
  - Deze knop heeft de naam 'button-expand-extra-html-css-javascript-en-php'
  - Deze knop heeft de stijl beschreven in het css element 'expand-button'
  --> 
  <button id="button-expand-extra-html-css-javascript-en-php" class="expand-button">
  <!-- <p> maakt een tekstblok -->
    <p>
      Extra
      <!-- <br> maakt een nieuwe regel -->
      <br>
      HTML, CSS, Javascript en PHP, de bouwstenen van een webpagina
    </p>
  </button>
  
  <!-- 
  De container voor de uitklaptekst 
  - Deze container heeft de naam 'expand-text-extra-html-css-javascript-en-php'
  - Deze container heeft de stijl beschreven in het css element 'expand-text'
  -->
  <div id="expand-text-extra-html-css-javascript-en-php" class="expand-text">
    <p>
    Dit is een voorbeeld van hoe HTML, CSS en Javascript werken.
    </p>
     <p>
    HTML beschrijft de inhoud van een webpagina. De HTML voor deze pagina zie je linksboven. In dit geval heeft de HTML een container voor deze hele pagina, waarbinnen een knop zit en een container die deze tekst bevat
    </p>
     <p>
    CSS beschrijft de opmaak van een webpagina. De CSS voor deze pagina zie je rechtsboven. De CSS beschrijft de opmaak van de hele sectie, de knop en deze tekst.
    </p>
     <p>
    Javascript beschrijft hoe elementen moeten veranderen. De voor deze pagina zie je linksonder. Als de knop aangeklikt wordt, kijkt deze code of deze tekst zichtbaar is. Als dat niet het geval is, dan maakt hij deze tekst zichtbaar. Als de tekst zichtbaar is, maakt hij de tekst onzichtbaar.
    </p>
  </div>
</div>

CSS

/* De opmaak voor het hele blok */
.expandable-section {
  /* Maak het lettertype Times New Roman */
  font-family: "Times New Roman", Times, serif;
}

/* De opmaak van een tekstblok (<p> blok) binnen het 'expandable-section' blok */
.expandable-section p {
  padding: 5px;
}

/* De opmaak voor de uitklapknop */
.expand-button {
  /* Maak de knop blauw */
  background-color: #162b93;
  
  /* Maak de knop wit */
  color: white;
  
   /* Maak de hoeken rond */
  border-radius: 6px;
}

/* De opmaak voor de uitklaptekst */
.expand-text {
  /* Maak de tekst onzichtbaar */
  visibility: visible;
}

JavaScript

// Als de expand-button aangeklikt wordt, doe:
$('#button-expand-extra-html-css-javascript-en-php').click(function() {
    // Als het css element 'visibility' van de uitklaptekst op 'hidden' staat
    if($('#expand-text-extra-html-css-javascript-en-php').css('visibility') == 'hidden'){
    	// Zet dan het css element 'visibility' van de uitklaptekst op 'visible'
    	$('#expand-text-extra-html-css-javascript-en-php').css('visibility', 'visible');
    // Anders
    } else {
    	// Zet het css element 'visibility' van de uitklaptekst op 'hidden'
    	$('#expand-text-extra-html-css-javascript-en-php').css('visibility', 'hidden');
    }
});