CODEWITHSUNDEEP
jqueryhtmlzurb-foundation
j. Cup
j. Cup

Reputation: 45

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>

Upvotes: 0

Views: 115

Answers (1)

Mohammad Usman
Mohammad Usman

Reputation: 39322

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();
    });
});

Upvotes: 2

Related Questions