From the course: Learning App Building with Vanilla JavaScript
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Show and hide elements using vanilla JavaScript - JavaScript Tutorial
From the course: Learning App Building with Vanilla JavaScript
Show and hide elements using vanilla JavaScript
- [Instructor] Our app now uses jQuery in just one final place, to animate the appearance of the results of the Ajax request in the view. Near the end of the app, on line 182, we're using the jQuery slideDown method to animate the appearance of the element with the class value results, which starts off with its display set to none in CSS. Now this is one of those cases where replacing the library actually takes not just JavaScript, but also some CSS code. So, switching over to style.css, line 232 here is the start of the style rule for the element that's revealed. So, in addition to the display property, we have border rules to create borders on all sides, and then to take away the border on the top. So jQuery is simply toggling this display property for us, but we can do that ourselves by creating another class and applying that class. So, I'm going to create another style rule for the open class on this element. So .nav, .nav-elements, .forecast, and then I'm going to call it .open.…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.