JavaScript/jQuery 101

Welcome to JavaScript/jQuery 101.

Before you can start coding, there are a couple of things you'll need to do first. When you're done, click on a tutorial below to get started.

Add the jQuery Library and your script page in the order shown below to your HTML page before the closing body tag.

			

			<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
			<script src="scripts/script.js"></script>

			

Tutorial 1: Accordion tabs

Demo

One

Content about tab 1.

Two

Content about tab 2.

Three

Content about tab 3.

HTML

				

<div class="demo"> <!--create a div that contains all of the content for your accordion-->
    
	 <h3>One</h3> <!--these h3 tags will be for the title bars of your accordion-->
	 <div> <!--make separate divs underneath your h3 tags and add any content you want inside-->
		<p>Content about tab 1.</p>
	 </div>
		      
	 <h3>Two</h3>
     <div>
		<p>Content about tab 2.</p>
     </div>
		      
	 <h3>Three</h3>
	 <div>
		<p>Content about tab 3.</p>
	 </div>
		    
</div>			

			

CSS

				

.demo {                    /* don't forget you can style accordion tabs any way you like */
  margin-top: 10%;
  width: 80%;
  margin-left: 10%;
}

.demo h3 {
  background-color:#c7eed9;
  border-bottom:1px solid #fff;
  color: #00314F;
  text-align: center;
  cursor: pointer;
  padding: 2% 0;
}

.demo div {
  height: 120px;
  background-color: #F4F4EE;
  border-bottom:1px solid #fff;
  position: relative;
}

.demo p {
  padding-top: 5%;
  margin-left: 29%;
}
				

JavaScript/jQuery

				

$('.demo > div').hide(); 

  var demoReveal = $('.demo h3');

demoReveal.click(function() {
  
  var thisPane = $(this).next();
  
  if(thisPane.is(':visible')){
    thisPane.slideToggle(); 
  }else{
    $('.demo > div:visible').slideToggle(); 
    $(this).next().slideToggle();
  };
  
});

				

HTML

				

<header>
	<h1>Header</h1>
</header>

<div class="nav"> <!--create your nav any way you like, just make sure to add the "nav" class-->
    <h1>Navigation Bar</h1>
</div>
			

			

CSS

				

.sticky {     /* you have to add these styles for the "sticky" class, but the styles below can be changed */
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
    border-top: 0;
}

header h1 {
	color: white;
	background-color: #54537d;
	text-align: center;
	padding-top: 2%;
	padding-bottom: 2%;
	font-size: 60px;
}

nav {
	height: 60px;
	background-color: #c7eed9;
	text-align: center;
	font-size: 30px;
	padding-top: 1%;
}

				

JavaScript/jQuery

				

$(document).ready(function() {
var stickyNavTop = $('.nav').offset().top;
 
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
      
if (scrollTop > stickyNavTop) { 
    $('.nav').addClass('sticky');
} else {
    $('.nav').removeClass('sticky'); 
}
};
 
stickyNav();
 
$(window).scroll(function() {
    stickyNav();
});
});

				

Tutorial 3: Show/Hide

Demo

Hello!

HTML

				

<div class="demo">

	<h2>Demo<h2>
		      
	<button class="btn-show">Show<button>
		     		 
	<p class="demo-text">Hello!<p> 
		        <!--the content you want to show/hide can be anything you want, not just text-->		
</div>
			

			

CSS

				

.demo h2 {
	color: white;
	text-align: center;
	margin-top: 10%;
	font-size: 24px;
}

.demo p {
	font-size: 80px;
	color: #c7eed9;
	margin-left: 25%;
	margin-top: 10%;
}

button {
	margin-left: 45%;
	margin-top: 5%;
}

				

JavaScript/jQuery

				

$('.demo-text').hide();

$('.btn-show').click(function(){
  
  var btn = $(this);
  var demoText = $(this).next();
  
  if(demoText.is(':visible')){
    btn.text('Show'); 
  }else{
    btn.text('Hide');
  };
  
  demoText.slideToggle(700);
  $(this).parent().toggleClass('highlight');
    
});