More Advanced jQuery Showing/Hiding

Topics covered in this JavaScript & jQuery tutorial:

Adding an animation to reveal hidden content, Targeting the proper div: traversing the document, Swapping the button image with jQuery

Exercise Preview

Exercise Overview

In a previous exercise, you learned to show and hide content. In this exercise you’ll take another look at showing and hiding, but with a new twist. You’ll learn how to control the speed of jQuery’s slideToggle() and learn more about targeting elements with jQuery.

Getting Started

1. Open your code editor if it isn’t already open.

2. Close any files you may have open.

3. For this exercise we’ll be working with the Show-Hide-Advanced folder located in Desktop > Class Files > yourname-JavaScript jQuery Class. You may want to open that folder in your code editor if it allows you to (like Visual Studio Code does).

4. Open history-news-jquery.html from the Show-Hide-Advanced folder.

5. Preview the page in a browser to see what the page will look like to users.

   There is a div that contains the additional text and a button that will show/hide it. The additional text is hidden by default using the .moreText class. We’ll use jQuery to add a cool animated transition to reveal the hidden content.

6. Leave the page open in the browser so we can come back to it later.

7. Return to your code editor.

   Before we use jQuery, we must link to its script file. Additionally, we are going to write our code in a main.js file. Before we code anything, we need to add these links.

8. Around line 91, add the following two links before the closing </body> tag:

      </div>
   <script src="js/vendor/jquery-2.1.0.min.js"></script>
   <script src="js/main.js"></script>
   </body>
   

9. Save the file.

10. Go into the js folder and open main.js.

11. Add jQuery’s document ready code:

    $(document).ready(function() {
    
    });
    

Adding an Animation to Reveal Hidden Content

1. We want the text to be revealed whenever someone clicks the More buttons. All the More buttons have a changeTextButton class applied, so we’ll use this to find out when they are clicked. Add the following bold code:

   $(document).ready(function() {
      $('.changeTextButton').click(function() {
   
      });
   });
   

   This code tells jQuery to run the enclosed function whenever an element with the class changeTextButton is clicked. Remember that the function() is required by jQuery and surrounds the code that will be executed.

2. Each story has a div with a class style called moreText applied. The moreText divs are the hidden ones that we want to reveal. Inside that function, add the code shown below in bold:

   $('.changeTextButton').click(function() {
      $('.moreText').slideToggle(500);
   });
   

   This says to do a jQuery slideToggle() animation to anything with the moreText class. The animation will last 500 milliseconds, which is half a second.

3. Save the file, switch back to the browser, and reload history-news-jquery.html.

4. Click one of the More buttons. Wow! They all expand (and collapse when clicked again). This is a good start.

Targeting the Proper Div: Traversing the Document

Currently, the buttons affect all the divs simultaneously, but we only want to animate the div that holds the button we click. Fortunately, we can find the button that was clicked and use that to find the div.

1. Switch back to main.js in your code editor.

2. In the click() method, replace '.moreText' with this as shown below:

   $('.changeTextButton').click(function() {
      $(this).slideToggle(500);
   });
   

   Remember that this refers to the element or object that issued the event. We are clicking on the More button, so this refers to that clicked image.

3. Save the file, switch to the browser and preview history-news-jquery.html.

4. Click one of the More buttons to see the image slide away.

5. Switch back to your code editor.

6. Now that we see how to target the clicked image, let’s find and target the moreText div in that same container. We’ve seen how JavaScript can maneuver around the document, and jQuery has the same concepts, but with more useful options. The following is a visual explanation of the concept of parent containers and siblings.

   

   The .moreText div and .changeTextButton img are both in the same container div. Because they are both in the same parent container, they are called siblings.

7. Add the .siblings() method as shown in bold. This will return all the elements that are in the same container (all the children of the same parent). The More button is sitting inside the container article div, so the image’s siblings are all the other elements in that div.

   $('.changeTextButton').click(function() {
      $(this).siblings().slideToggle(500);
   });
   

8. Save the file.

9. Switch to the browser and reload history-news-jquery.html.

10. Click one of the More buttons to see that the moreText div slides open, but everything else in the container disappears. Not exactly what we’re looking for, but we’re getting close.

11. Switch back to your code editor.

12. We’ve successfully targeted all the elements in that container div, so the final step is narrowing it down to only the moreText div. Inside the parentheses of the siblings() method, add the bold code:

    $('.changeTextButton').click(function() {
       $(this).siblings('.moreText').slideToggle(500);
    });
    

    We want to find our div with the moreText class, so .moreText will find just that!

13. Save the file.

14. Switch to the browser and reload history-news-jquery.html.

15. Click a More button. Wowee! Isn’t it amazing what a few lines of code with jQuery can do? If you wanted to write this animation from scratch without jQuery, we can assure you it wouldn’t be anywhere near this easy.

Swapping the Button Image with jQuery

In all your excitement, you may not have noticed that the button still says More, even when it’s going to hide the text. We already know that this refers to the image, so all we need to do is check to see which image it is (either More or Less) and swap it accordingly.

1. Switch back to your code editor.

2. Below the slideToggle() animation line, add the following if statement:

      $(this).siblings('.moreText').slideToggle(500);
      if ( $(this).attr('src') == 'img/more-button.png' ) {
   
      }
   });
   

   .attr() looks for attributes of that element. We’re looking for the image’s source (src) and checking if it is equal to more-button.png. Further, if it is equal to More, we want to swap it with the Less image.

3. Add this code to set the src to less-button.png:

   if ( $(this).attr('src') == 'img/more-button.png' ) {
      $(this).attr('src', 'img/less-button.png');
   }
   

4. Save the file.

5. Switch to the browser and reload history-news-jquery.html.

6. Test one of the buttons. The image should change to say Less, but when you click it again, it won’t change back to More.

7. Switch back to your code editor.

8. Below the if statement, add an else condition as shown in bold:

      if ( $(this).attr('src') == 'img/more-button.png' ) {
         $(this).attr('src', 'img/less-button.png');
      }
      else {
   
      }
   });
   

   NOTE: When the original condition of an if statement is false, nothing happens. You can use else to define what happens when the condition is false.

9. Add the following code to set the src to more-button.png (you can copy and paste the code from the less button, then change less to more):

   if ( $(this).attr('src') == 'img/more-button.png' ) {
      $(this).attr('src', 'img/less-button.png');
   }   
   else {
      $(this).attr('src', 'img/more-button.png');
   }
   

10. That’s it! Save the file.

11. Switch to the browser one last time and reload history-news-jquery.html.

12. Test out all the buttons.

    NOTE: If you want to refer to our final code example, go to Desktop > Class Files > yourname-JavaScript jQuery Class > Done-Files > Show-Hide-Advanced.