html - Custom jquery combination with foundation -
i new foundation zurb 6. have written jquery own show , hide text. when add jquery html file won't work anymore (without foundation worked), created other file named custom.js code created in 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 html file have @ bottom:
<script src="js/vendor/custom.js"></script> how can let litle code work?
this part of code looks 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 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 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 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>
custom.js file should after jquery. , have typos in custom.js file. have brackets @ 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 code 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
Post a Comment