Pen Settings



CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource


Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.


              <script src=""></script>

<div id="entire-doc">
<nav id="navbar">
  <a href="#what_is_jquery?" class="nav-link">What is jQuery?</a>
  <a href="#getting_started" class="nav-link">Getting Started</a>
  <a href="#selectors" class="nav-link">Selectors</a>
  <a href="#events" class="nav-link">Events</a>
  <a href="#effects" class="nav-link">Effects</a>
  <a href="#html/css_manipulation" class="nav-link">HTML/CSS Manipulation</a>
<main id="main-doc">
    <section class="main-section" id="what_is_jquery?">
      <header><h2>What is jQuery?</h2></header>
      <p>jQuery is a well known JavaScript library. Less code is generally needed to make something happen using jQuery versus just JavaScript. Also, the code is less complicated and works across all major browsers. jQuery includes the following abilities:</p>
        <li>HTML and CSS manipulation</li>
        <li>HTML events</li>
        <li>Animation effects</li>
      <p>In order to use jQuery, a $ must be used before the code, then selectors based on CSS, and then a jQuery method that causes something to happen. Here's an example that hides all p elements: <code>$("p").hide()</code>. Basically, it's <code>$(selector).method()</code>. There are several types of methods, like events, effects and HTML manipulation.</p>
    <section class="main-section" id="getting_started">
      <header><h2>Getting Started</h2></header>
      <p>To use the library, <a href="" target="_blank"> download</a> it or use a <a href="" target="_blank">CDN</a> (Content Delivery Network). Paste the CDN into your code or create a link to the downloaded library. The CDN or link to the downloaded library can be put within the head tags or just before the closing body tag of the HTML document.</p>
      <p>The code you write should go in the same area within new script tags or create a separate link to an external JavaScript file. If you put your code in the head, then you'll need to wrap this code around all of your other code:</p> 
      <code class="codeblock">$(document).ready(function(){</code>
      <code class="codeblock">&nbsp;&nbsp;//*** Code to run after the page is loaded</code>
      <code class="codeblock">});</code>
      <p>A shortened version can also be used:</p>
      <code class="codeblock">$(function(){</code>
      <code class="codeblock">&nbsp;&nbsp;//*** Code to run after the page is loaded</code>
      <code class="codeblock">});</code>
      <p>If you put your code in the head and load an external file, you'll need to think about using defer or asynch within the script tag. Defer causes the code to load and run after the HTML is rendered. Asynch loads the code at the same time as the HTML and then runs it after the HTML is rendered. Here's what it looks like: <code>&#60;script src="..." asynch&#62;&#60;/script&#62;</code>. Asynch and defer won't work in browsers that don't support HTML5.</p>
    <section class="main-section" id="selectors">
      <p>jQuery selectors are based on CSS selectors. They are used to select HTML elements in order to manipulate the content or styling. There are many ways to select. Here are some examples:</p>
        <li><code>$(this)</code> - uses the selector of the method that calls it</li>
        <li><code>$("h2")</code> - selects all h2 elements</li>
        <li><code>$("p[class]")</code> - selects all p elements with a class</li>
        <li><code>$("p.neat[id^=ap]")</code> - selects all p elements with a neat class and an id that starts with the letters ap.</li>
        <li><code>$("ul li:first-child")</code> - selects the first li element in every ul element</li>
        <li><code>$("li:first")</code> - selects the first li element in the document</li>
        <li><code>$("p:contains('green')")</code> - selects the p elements that have text equal to green in them</li>
        <li><code>$("li:eq(1)")</code> - selects the second li element in the document, because the index starts at 0</li>
        <li><code>$("li:not(li:eq(1))")</code> - selects all the li elements except the second one</li>
        <li><code>$("li:nth-child(2)")</code> - selects the second child of every ul element</li>
        <li><code>$("tr:odd")</code> - selects all odd tr elements starting with 1</li>
      <p>As you can see, there are many ways to select elements and even more that I didn't show here. For more, see <a href="" target="_blank">w3school's jQuery Selectors Reference</a>.</p>
    <section class="main-section" id="events">
      <p>Events are all of the actions a user can perform while on a web page, like clicking a mouse, making a keypress, submitting a form, or scrolling in a window.</p>
      <p>Click is one event type. Here's an example of code that would excute if a button was clicked:</p>
      <code class="codeblock">$("button").click(function(){</code>
      <code class="codeblock">&nbsp;&nbsp;//*** add jQuery code that happens after click occurs</code>
      <code class="codeblock">});</code>
      <p>There are many other event methods, like dblclick(), focus(), hover(), keypress(), submit(), etc. For more, see <a href="">w3school's jQuery Events Reference</a>.</p>
    <section class="main-section" id="effects">
      <p>jQuery has some animation effects that are pretty cool.</p>
        <li>Hide, show, fade and slide all have this configuration: <code>$(selector).method(speed, callback);</code> where speed is a number in milliseconds or "slow" or "fast" and callback is a function that is run after the effect is finished, both are optional</li>
            <li>hide( ) hides an element, show( ) shows it and toggle( ) shows it if it's hidden and hides it if it is showing</li>
            <li>fadeIn( ) fades in an element, fadeOut( ) fades out an element, fadeToggle( ) will fade in if it's faded out and fade out if it's faded in</li>
            <li>same is true for slideDown( ), slideUp( ) and slideToggle( ) </li>
          <li>Animate can manipulate the element with one or more parameters <code>$(selector).animate({parameters}, speed, callback);</code></li>
            <li>Almost all css properties can be manipulated, except color which requires a plug in</li>
            <li>If an element moves, it must have the position defined.</li>
            <li>All parameters must be camel case, like margin-right in CSS would be marginRight in this context</li>
            <li>Movement can be defined for where it is to go on the screen or how much to move by using += or -= before the number</li>
            <li>All of the parameters happen at once, but it's possible to use queue functionality so they happen one after the other</li>
          <li>Chaining is possible in jQuery, where one method after another is executed like this: <code>$(selector).method().method().method();</code></li>
      <p>For more, see <a href="" target="_blank">w3school's jQuery Effects Reference</a>.</p>
    <section class="main-section" id="html/css_manipulation">
      <header><h2>HTML/CSS Manipulation</h2></header>
      <p>There are ways to get information from the DOM or a style sheet and also to put information there as well.</p>
      <p>Getting information from the DOM:</p>
          <li><code>$("p:first").text();</code> - will contain the text found in the first p element</li>
          <li><code>$("#tag").html();</code> - will contain the html that has an id of tag, including tags and text</li>
          <li><code>$("input").val();</code> - will contain the value of a form field</li>
          <li><code>$("#globe").attr("background-color");</code> - will contain the background color for the element with id of globe, any attribute can be found</li>
      <p>Putting information into the DOM:</p>
        <li><code>$("p").text("Buy this!");</code> - will make all p elements have this text</li>
        <li><code>$("div").html("&#60;p>Buy this!&#60;/p>");</code> - will put this html into every div</li>
        <li><code>$("input").val("dog");</code> - will put a value of dog in every input element</li>
        <li><code>$(#globe).attr("background-color", "blue");</code> - will give the element with id globe a blue background</li>
        <li><code>$("p").append("appended text");</code> - will add "appended text" to the end of whatever text is in the p element</li>
        <p>For more ways to manipulate, see <a href="" target="_blank">jQuery's API for Manipulation</a></p>


              /* Google Font */
@import url('');
* {
  margin: 0;
  padding: 0;
body {
  background-color: #34523f;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
#entire-doc {
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
a {
  color: #8a218a;
a:hover {
  color: #1b8441;
/*** NAVIGATION ***/
h1 {
  text-align: center;
  padding: 15px 0;
  font-size: 40px;
  text-shadow: 0 0 8px #408e37;
#navbar {
  position: fixed;
  width: 150px;
  height: 100%;
  background-color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
.nav-link {
  margin: 5px;
  padding: 5px;
  text-decoration: none;
  font-size: 18px;
  border: 1px solid #dad7d7;
  color: #000;
.nav-link:hover {
  background-color: #ececec;
  animation-name: nav;
  animation-duration: 1s;
@keyframes nav {
    0% {padding: 5px}
    50% {padding: 5px 0 5px 10px}
    100% {padding: 5px}
/*** MAIN CONTENT ***/
h2 {
  text-align: center;
  padding: 3px 0;
  font-size: 30px;
  background-color: #ececec;
  box-shadow: 0 2px 4px #408e37;
#main-doc {
  width: (100% - 150px); 
  margin-left: 165px;
  background-color: #fff;
.main-section p {
  padding: 10px;
  line-height: 1.3;
ul {
  margin: 10px 20px 10px 40px;
code {
  background-color: #ececec;
.codeblock {
  margin: 0 40px;   
  display: block;
ul ul li {
  list-style-type: disc;    
/* Change in CSS for smaller screens */
@media screen and (max-width: 650px) {
  #navbar {
    display: none;
  #main-doc, #entire-doc {
    width: 100%;
    margin: 0;