jQuery opdrachten

Tabbladen

De HTML code voor deze opdracht:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Tabbladen</title>
</head>
<body>
  <span>HTML</span>
  <span>CSS</span>
  <span>JavaScript</span>
  <span>PHP</span>
  <div class="tab" id="tab1">HTML verzorgt de structuur en de inhoud van de webpagina.</div>
  <div class="tab" id="tab2">CSS is verantwoordelijk voor de opmaak.</div>
  <div class="tab" id="tab3">JavaScript voegt functionaliteit toe.</div>
  <div class="tab" id="tab4">PHP maakt dynamische onderdelen op de webserver aan.</div>
</body>
</html>

Zorg dat je op deze pagina jQuery kunt gebruiken.

Schrijf de jQuery code om na het laden van de webpagina alle tags met de klasse .tab te verbergen. Daarna zorg je dat de eerste tag met de klasse .tab terug wordt weergegeven.

Schrijf een functie waarmee je bij het klikken op een tabblad het bijhorende tab weergeeft en alle andere tabs verbergt.

Zorg voor een geleidelijke overgang bij het weergeven en verbergen van een tab (overgangstijd: 1 seconde).

Om het geheel af te werken gebruik je de volgende CSS opmaak:

<style type="text/css">
  .tabblad {
    color: #fff;
    padding-bottom: 3px;
    padding-top: 2px;
    padding-right: 3px;
    padding-left: 3px;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.20),
      0px 0px 3px rgba(0, 0, 0, 0.10),
      inset 0px 5px 12px #004499,
      inset 0px 25px 25px rgba(59, 131, 240, .50),
      inset 0px 25px 25px #004499;
    border-radius: 5px 5px 0px 0px;
    text-shadow: 1px 1px 1px #000;
    cursor: pointer;
  }
  .tabblad:hover {
    box-shadow:
      2px 2px 4px rgba(0,0,0,0.20),
      0px 0px 3px rgba(0, 0, 0, 0.10),
      inset 0px 10px 12px #004499,
      inset 0px 20px 2px rgba(59, 131, 240, .7),
      inset 0px 25px 25px #004499;
    text-shadow: -1px -1px -1px #000;
  }
  .tab {
    box-shadow: 3px 3px 6px #004499;
    margin-top: 3px;
    border: 1px solid rgba(59, 131, 240, 1);
    padding-top: 0px;
    padding-right: 5px;
    padding-bottom: 3px;
    padding-left: 5px;
  }
</style>

Weergeven

Accordeon

Maak met jQuery het volgende systeem:

Bij het klikken op een div wordt een div binnen de aangeklikte div met een overgang weergegeven (geopend).
Na het laden van de pagina is enkel de div binnen de eerste aanklikbare div zichtbaar.
Er mag nooit meer dan één openklikbare div geopend zijn.

Weergeven

Om het systeem af te werken, kan je de volgende CSS opmaak gebruiken:

<style type="text/css">
  .accordeon {
    color: #fff;
    padding-bottom: 3px;
    padding-top: 2px;
    padding-right: 3px;
    padding-left: 3px;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.20),
      0px 0px 3px rgba(0, 0, 0, 0.10),
      inset 0px 5px 12px #004499,
      inset 0px 25px 25px rgba(59, 131, 240, .50),
      inset 0px 25px 25px #004499;
    text-shadow: 1px 1px 1px #000;
    cursor: pointer;
  }
  .accordeon:hover {
    box-shadow:
      2px 2px 4px rgba(0,0,0,0.20),
      0px 0px 3px rgba(0, 0, 0, 0.10),
      inset 0px 10px 12px #004499,
      inset 0px 20px 2px rgba(59, 131, 240, .7),
      inset 0px 25px 25px #004499;
    text-shadow: -1px -1px -1px #000;
  }
  .accordeon_inhoud {
    color: #000;
    background-color: #fff;
    box-shadow: 3px 3px 6px #004499;
    margin-top: 3px;
    border: 1px solid rgba(59, 131, 240, 1);
    padding-top: 0px;
    padding-right: 5px;
    padding-bottom: 3px;
    padding-left: 5px;
    text-shadow: 0px 0px 0px #000;
    cursor: default;
  }
</style>