jQuery

Starting to learn jQuery was a fun and insightful task. I started by looking through the information on W3Schools and thought it be best to add functions and events to my existing Furtive website. jQuery’s tag line is “Write Less, Do More” and it has proved exactly this in this project. I was able to execute JavaScript functions with minimal lines of code and my website instantly looks cleaner and more professional. Using jQuery’s JavaScript library also helped me to advance in the way I see scripting in JavaScript as a whole.

Test Site

Tranquility (Test site)

I created the test site above to try a few things out and see what would look best. I have included 3 different types of toggle as shown in the gif below.

Firstly I had to create an id for all three wraps and assign the property display: none. This is so that the element is temporarily hidden (instead of deleting and recreating) until a command is executed to show it in a certain way. This is the CSS code for this command:

#wrapOne {
 display: none
}

#wrapTwo {
 display: none
}

#wrapThree {
 display: none;
}

After this I was able to start applying jQuery to my site The first piece of script I applied was to make sure the JavaScript code runs as soon as the Document Object Model (DOM) is ready. If anything inside the DOM has not loaded properly without this function and JavaScript code tries to execute, then the page will load incorrectly.

$(document).ready(function ()

To create the clickable bar that displays the title of each section I create a <div>  and assign a jQuery click function and include the title in a <h2> tag. After this I made the contents of the toggle section separately by opening another <div> and assigning it the id #wrapOne as defined in the external CSS. I then give this section the same class styling as the title bar so they both look the same. This is the jQuery code:

$("#1").click(function () {
    $("#wrapOne").toggle("slow");
});

Here is the HTML (I have included the whole section for better context):

<div class="py2 bg--gradientOne">
    <h2 id="1">1.toggle</h2>
    </div>

<div id="wrapOne">
    <div class="py2 bg--gradientOne">
        <section class="measure p2">
            <div class="muted">
                <p class="h4">
                    Happiness in intelligent people is the rarest thing I know.
                </p>
                <h6>- Ernest Hemingway</h6>
            </div>
        </section>
     </div>
 </div>

I have applied the same principles to the next two sections which feature slightly different toggle effects. These are referenced in the title name of each section.

Once I had got my head around how to apply the rule of buttons I thought it fitting to make some actual buttons myself. The simplest way to display this would be in the form of ‘Hide’ and ‘Show’ buttons for the featured image at the top. I created individual ids for this and named them #showbutton and #hidebutton. The images id is #image and for a smooth execution in the browser I gave them the ‘slow’ function so the experience is more aesthetically pleasing. For the styling of the button I used the predefined Furtive CSS btn–gray.

$("#hidebutton").click(function () {
 $("#image").hide("slow", function () {
 });
 });

$("#showbutton").click(function () {
 $("#image").show("slow", function () {
 });
 });

<button id="hidebutton" class="btn--gray">Hide</button>
<button id="showbutton" class="btn--gray">Show</button>
<div><img id="image" src="breathe-cropped.gif" alt="Breathe"/></div>

<h3>Breathe</h3>

Final Site

Tranquility (Final)

For my final piece I decided to go with .slideToggle as I thought this was the smoothest out of all of them and complimented my website nicely. Firstly I changed the CSS class to .wrap  and applied this to each <div> section. I applied this to all 6 sections and if you click any of the title bars then all of them will expand and collapse in simultaneously. To run my first tests on this I added a console.log to show when the bar had been clicked.

$(".slideToggle").click(function () {
 console.log("slide toggle click");
 $(".wrap").slideToggle("slow");
 });

When I start to learn more about JavaScript I hope to be able to make collapsible information bars like this but make them function independently. Unfortunately for this project I was unable to figure out how to do this in time. Having said this I am happy with the foundation work I have put in as now I can build my knowledge up with a firm understanding of how jQuery functions work.