j. Cup j. Cup - 6 months ago 14
Javascript Question

Custom jquery combination with foundation

I am new with foundation zurb 6.
I have written a jquery by my own to show and hide some text.
But when i add the jquery to the html file it won't work anymore (without foundation it worked), so i created an other file named custom.js this code i created in this file:

$(document).ready(function(){
$(".afspraak-rij").hide();
$(".offerte-rij").hide();

$(".afspraak").click(function(){
$(".afspraak-rij").show();
$(".offerte-rij").hide();
)};
$(".offerte").click(function(){
$(".afspraak-rij").hide();
$(".offerte-rij").show();
)};
)};


In the HTML file i have this at the bottom:

<script src="js/vendor/custom.js"></script>


How can i let the litle code work?

This is what a part of the code looks like now:



<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Oefensite Foundation</title>
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
</head>


<body>

<div class="background" />
<div class="background2" />
<div class="row">
<div class="large-12 columns">
<div class="success callout">
<p class="text-center"><strong>Wiek de Laat.</strong><br>Dit is het vernieuwde offerte aanvraag formulier van Wiek de Laat.</p>
</div>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<h1 class="text-center">Aanvraag Wiek de Laat</h1>
</div>
</div>

<form class="form callout">
<hr />
<div class="row">
<div class="large-12 columns">
<div class="large-12 columns text-center">
<h5><strong>3. Afspraak/offerte</strong></h5>
<div class="row">
<div class="large-12 columns">
<input type="radio" class="afspraak" name="afof" value="afspraak" id="af"><label for="af">Afspraak</label>
<input type="radio" class="offerte" name="afof" value="offerte" id="of"><label for="of">Offerte</label>
</div>
</div>
<div class="row afspraak-rij">
<div class="large-12 columns">
<h5><strong>Afspraak</strong></h5>
<div class="row">
<div class="large-6 columns text-center">
<input type="radio" name="metwie" value="destil" id="destil"><label for="destil">Destil product specialist</label>
<label>Wat is de vraag/behoefte?</label><textarea placeholder="small-12.columns"></textarea>
</div>
<div class="large-6 columns text-center">
<input type="radio" name="metwie" value="wiek" id="wiek"><label for="wiek">Wiek de Laat adviseur</label>
<label>Wat is de vraag/behoefte?</label><textarea placeholder="small-12.columns"/></textarea>
</div>
</div>
</div>
</div>
<div class="row offerte-rij">
<div class="large-12 columns">
<h5><strong>Offerte</strong></h5>
<div class="row">
<div class="large-4 columns">
<input type="checkbox" name="voorwat" value="aandrijving" id="aandrijving"><label for="aandrijving">Aandrijving</label>
</div>
<div class="large-4 columns">
<input type="checkbox" name="voorwat" value="vergrendeling" id="vergrendeling"><label for="vergrendeling">Vergrendeling</label>
</div>
<div class="large-4 columns">
<input type="checkbox" name="voorwat" value="toegangscontrole" id="toegangscontrole"><label for="toegangscontrole">Toegangscontrole</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr />


</form>


<script src="js/vendor/custom.js"></script>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>




Answer

Custom.js file should be after jQuery. And you have typos in your custom.js file. You have brackets at wrong positions.

<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
<script src="js/vendor/custom.js"></script>

And replace your code with following:

$(document).ready(function() {
    $(".afspraak-rij").hide();
    $(".offerte-rij").hide();

    $(".afspraak").click(function(){
        $(".afspraak-rij").show();
        $(".offerte-rij").hide();
    });
    $(".offerte").click(function(){
        $(".afspraak-rij").hide();
        $(".offerte-rij").show();
    });
});
Comments